Filter Array Of Objects Based On Input Field In React

Got in a rather troublesome situation I have an array of objects

[
   {
     "title":"placeholder",
     "text":"placeholder"
   },
   {
     "title":"test",
     "text":"placeholder"
   },
   {
     "title":"javascript",
     "text":"placeholder"
   }
]

I am displaying them in a div,but thats not important I got an input field which users should type in title's and as they type the array should only show matching object. Inputing java would show the javascript titled object

I need to somehow change the array so it doesnt display anything but the entered title and if the input is empty shows the whole array

I am using React but i can only use hooks So i copy the json

var [arrayOfObjects, setArray] = useState(Json)

the Json is imported from a local file arrayOfNotes is the array that i need to change pointing out so its easier to understand

ty in advance

The array filter method is what you're looking for.

Here's what your component might looks like.

const List = ({ data }) => {
  const [value, setValue] = useState('')

  return (
    <div>
      <input 
        type="text"
        value={value} 
        onChange={e => setValue(e.target.value)} 
      />

      {data
        .filter(item => {
          if (!value) return true
          if (item.title.includes(value) || item.text.includes(value)) {
            return true
          }
        })
        .map(item => (
          <div>
            <h1>{item.title}</h1>
            <p>{item.text}</p>
          </div>
        ))
      }
    </div>
  )
}

And you pass your json data to that component

<List data={Json} />

Here's a working example of the above code