/Javascript/React/Filter based on input typing react

Filter based on input typing react

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>
  )
}

Source: stackoverflow.com

Similar codes

1 vote368 views2 answers
Change text size according to screen react native
Javascript React
0 vote372 views1 answer
React event for modals
Javascript React
0 vote409 views1 answer
React catch error in component
Javascript React
0 vote377 views3 answers
How to get state value from history react
Javascript React
-1 vote387 views1 answer
Image component doesn't show image from url react native
Javascript React
0 vote355 views1 answer
Reactjs fix ios apostrophe encoding
Javascript React
2 votes342 views3 answers
There might be a problem with the project dependency tree. It is likely not a bug in Create React App, but something you need to fix locally.
Javascript React
0 vote382 views1 answer
React-scripts not found
Javascript React
0 vote381 views1 answer
Background image not loading from a link react
Javascript React
0 vote415 views1 answer
Reactjs facebook login popup trigger on load page
Javascript React