cómo crear el filtro de búsqueda React para buscar múltiples objetos key valores

Posteriormente a mirar en diversos repositorios y sitios al terminar dimos con la solución que te compartiremos ahora.

Solución:

Puedes mantener un valor filter en su estado de componente y utilícelo para ver si está contenido como una subcadena en cualquiera de los array propiedades del elemento.

Ejemplo

class App extends React.Component 
  state = 
    filter: "",
    data: [
      
        fname: "Jayne",
        lname: "Washington",
        email: "[email protected]",
        gender: "female"
      ,
      
        fname: "Peterson",
        lname: "Dalton",
        email: "[email protected]",
        gender: "male"
      ,
      
        fname: "Velazquez",
        lname: "Calderon",
        email: "[email protected]",
        gender: "male"
      ,
      
        fname: "Norman",
        lname: "Reed",
        email: "[email protected]",
        gender: "male"
      
    ]
  ;

  handleChange = event => 
    this.setState( filter: event.target.value );
  ;

  render() 
    const  filter, data  = this.state;
    const lowercasedFilter = filter.toLowerCase();
    const filteredData = data.filter(item => 
      return Object.keys(item).some(key =>
        item[key].toLowerCase().includes(lowercasedFilter)
      );
    );

    return (
      

        
        filteredData.map(item => (
          

            

              item.fname item.lname - item.gender - item.email
            
          
        ))
      
    );
  


ReactDOM.render(, document.getElementById("root"));

Reseñas y valoraciones del post

Si te sientes impulsado, eres capaz de dejar un tutorial acerca de qué le añadirías a este escrito.

---

---

Utiliza Nuestro Buscador