Задать вопрос
@mosikus
react

Как сделать условие на value по типу {['text'].includes(value)? ( Text): ( ) }?

Есть инпут с атрибутом value
<input value={value} readOnly={true} />
При вводе (ввод кнопками, не важно) определенных цифр появляются определенные фразы (ниже пример)
<div>
{['2','5,'6','9'].includes(value) ? ( <div>Фраза 1 </div>) : ( <div/> ) }
  
{['22','43','33','67'].includes(value) ? ( <div>Фраза 2 </div>) : ( <div/> ) }
</div>


Мне нужно сделать, чтобы при вводе, например, от 345 до 500 (и у меня будет ещё больше таких промежутков) появлялось "Ничего не найдено". Как это правильно( ну, чтобы хотя бы работало :) ) сделать?
  • Вопрос задан
  • 90 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React 
{value >= 345 && value <= 500 ? <div>ничего нет</div> : null}


будет ещё больше таких промежутков

Ну тогда делаете массив объектов, которые будут содержать два свойства - массив промежутков (и отдельных значений, если надо) и текст, который надо вывести. И фильтруете его при рендеринге. Как-то так:

const messages = [
  {
    values: [ 1, 2, 4, 8, 16, 32, 64, 128, 256, 512 ],
    message: 'hello, world!!',
  },
  {
    values: [ [ 5, 15 ], [ 100, 200 ], 333, 444, 555 ],
    message: 'fuck the world',
  },
  {
    values: [ [ 50, 150 ], [ 250, 350 ], [ 666, 999 ] ],
    message: 'fuck everything',
  }
];

...

<div>
  {messages
    .filter(n => n.values.some(v => (
      (v instanceof Array && v[0] <= value && value <= v[1]) ||
      v === value
    )))
    .map(n => <div>{n.message}</div>)
  }
</div>
Ответ написан
8 комментариев
8 комментариев
Пригласить эксперта
Ответы на вопрос 1
@mosikus Автор вопроса
В заголовке вопроса дивы исчезли*
{['text'].includes(value) ? ( <div>Text</div>) : ( <div/> ) }
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
React разработчик
Uptrade
от 150 000 до 200 000 ₽
JS|React Native разработчик
Венста • Киров
от 60 000 до 120 000 ₽
Senior React Developer
DARS • Москва
от 200 000 до 300 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработать сайт на CS-Cart (статусы товаров и цены)
25 апр. 2024, в 16:56
5000 руб./за проект
Внесение правок в мобильное приложение (Android)
25 апр. 2024, в 16:54
3000 руб./за проект
Motion дизайн для гиф
25 апр. 2024, в 16:38
12000 руб./за проект
Ещё заказы