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

Question

[mosikus]

Есть инпут с атрибутом 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 (и у меня будет ещё больше таких промежутков) появлялось "Ничего не найдено". Как это правильно( ну, чтобы хотя бы работало :) ) сделать?

Answer 1

[0xD34F]

{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>

Comments

[mosikus]

Спасибо вам ещё раз. Мне не понятен такой момент,
эти

{
    values: [ 1, 2, 4, 8, 16, 32, 64, 128, 256, 512 ],
    message: 'hello, world!!',
  },

и
во втором массиве при вводе этих 333, 444, 555 цифр фразы не выводятся

[0xD34F]

durak22212, да всё понятно. Число не может быть равно строке. Или выполняйте сравнение с преобразованием типов, или вручную преобразуйте value в число перед сравнением, или сделайте элементы массивов строками вместо чисел.

[mosikus]

на этой
.map(n => <div>{n.message}</div>)
строке плюет ошибку
Each child in a list should have a unique "key" prop, как исправить?)

[0xD34F]

durak22212,

)

Не понял, что вы хотели этим сказать. Объяснитесь.

[mosikus]

[0xD34F]

durak22212, я что-то непонятное спросил?

[mosikus]

0xD34F, не понимаю вас.

[0xD34F]

durak22212, ясно. Дальше сами.

Answer 2

[mosikus]

В заголовке вопроса дивы исчезли*

{['text'].includes(value) ? ( <div>Text</div>) : ( <div/> ) }