Quiero filtrar los objetos por texto buscado. Usé el método de filtro, pero sale indefinido. Por ejemplo, quiero filtrar las citas por "Albert Einstein" cuando el usuario las ingresa en la búsqueda ...

1
Yunus 4 mar. 2021 a las 17:24

1 respuesta

La mejor respuesta

Deberías hacer:

selectedData.filter(
  (item) => item.author.toLowerCase().indexOf(searchText.toLowerCase()) > -1
)

Y debe almacenar searchText con el controlador onChange del campo de entrada.

Un ejemplo:

function App() {
  const [text, setText] = React.useState('')
  const [quotes, setQuotes] = React.useState([
  {
    "text": "Genius is one percent inspiration and ninety-nine percent perspiration.",
    "author": "Thomas Edison"
  },
  {
    "text": "You can observe a lot just by watching.",
    "author": "Yogi Berra"
  }
  ])

  return (
    <div>
      <div>
        {quotes
          .filter((q) => {
             return q.author.toLowerCase().indexOf(text.toLowerCase()) > -1
          })
          .map((q) => (
            <div>{q.author} | {q.text}</div>
          ))}
      </div>
      <input type="text" onChange={(e) => setText(e.target.value)} />
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('mydiv'))
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<body>
<div id="mydiv"></div>
</body>
0
Ajeet Shah 4 mar. 2021 a las 15:28