How to make a condition on value like {['text'].includes(value)? ( Text): ( ) }?

Question

React

There is an input with the value attribute When you enter (enter with buttons, it doesn’t matter) certain numbers appear certain phrases (below is an example)
<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>

I need to make it so that when you enter, for example, from 345 to 500 (and I will have even more such gaps), "Nothing was found". How is it right (well, at least to work :) ) to do?

Answer 1

{value >= 345 && value <= 500 ? <div>ничего нет</div> : null}

Well, then you make an array of objects that will contain two properties - an array of gaps (and individual values, if necessary) and the text to be displayed. And filter it when rendering. Something like this:

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>

Answer 2

Divas disappeared in the title of the question*

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