Jarod Cavalcante
2020-08-22T04:06:47Z

simpleReactSeach.jsx

| import React, { useState, useEffect } from "react";
|
| export default function App() {
| const [text, setText] = useState("");
| const [data, setData] = useState([
| {
| id: 1,
| name: "abacate"
| },
| {
| id: 2,
| name: "abacate"
| },
| {
| id: 3,
| name: "abobora"
| },
| {
| id: 4,
| name: "arroz"
| }
| ]);
| const [show, setShow] = useState([]);
|
| useEffect(() => {
| const result = data.filter((item) => item.name.indexOf(text) !== -1);
| setShow(result);
| }, [text, data]);
|
| return (
|
| Busca
| <input
| type="text"
| value={text}
| onChange={(e) => setText(e.target.value)}
| />
| {show.map((item) => (
| {item.name}
| ))}
|
| );
| }
|
| // https://codesandbox.io/s/simples-busca-espontanea-react-x9ewu?file=/src/App.js