/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 vote187 views1 answer
Nextjs react native web typescript
Javascript React
0 vote192 views4 answers
Router react how to pass data to class component
Javascript React
0 vote184 views1 answer
Duplicate module name: React Native hasteimpl react native android
Javascript React
0 vote172 views1 answer
Return <Text> using if condition react native
Javascript React
7 votes195 views3 answers
React route props
Javascript React
0 vote180 views1 answer
Enzynme not support react 17
Javascript React
-2 votes173 views2 answers
React native text align vertical center
Javascript React
0 vote178 views1 answer
How to link a photo in expo react native
Javascript React
1 vote182 views2 answers
Await fetch in react
Javascript React
0 vote261 views1 answer
Remove unused dependencies in React Ask Question
Javascript React