/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

0 vote59 views0 answer
React
Javascript React
0 vote108 views1 answer
Javascript array filter duplicates in react
Javascript React
0 vote107 views1 answer
Export variables react
Javascript React
0 vote101 views1 answer
React-i18next
Javascript React
142 votes262 views6 answers
Create-react-app
Javascript React
11 votes118 views2 answers
React must be in scope when using jsx
Javascript React
0 vote108 views1 answer
React deployment pipeline
Javascript React
-1 vote64 views1 answer
Vimeo player react native
Javascript React
3 votes107 views5 answers
./src/App.js Attempted import error: 'Switch' is not exported from 'react-router-dom'.
Javascript React
0 vote111 views1 answer
Module not found: Can't resolve '@date-io/date-fns' in 'C:\Users\61455\Documents\React apps\mya2o\src\pages'
Javascript React