Cozy Codeur - Blog

Faire un Component SearchBar adaptable à tout type de données - Reactjs

June 16, 2022

Si vous êtes perdu ou que vous avez un doute, à tout moment vous pouvez vérifier si tout est en ordre depuis ce répo github

Etape 1 : Initialisation du projet ! 🔥

Si vous partez de zéro commencez par lancer la commande create-react-app suivi du nom du votre projet depuis votre terminal :

npx create-react-app searchbar-component

Parfait maintenant qu’on est prêt on va tout d’abord afficher nos données, par exemple voilà deux types de données que vous pouvez préparer et afficher avec un .map !

// App.js
...

function App() {
  const dataArray = [
    "John",
    "Mark",
    "Antoine",
    "Fabrice",
    "Laura",
    "Fabienne",
    "Thomas",
    "Léa",
  ];

  const dataObjects = [
    { name: "John", details: { age: 32, type: "gentil" } },
    { name: "Mark", details: { age: 12, type: "cool" } },
    { name: "Antoine", details: { age: 65, type: "gentil" } },
    { name: "Fabrice", details: { age: 6, type: "flemmard" } },
    { name: "Laura", details: { age: 31, type: "costaud" } },
    { name: "Fabienne", details: { age: 54, type: "gentil" } },
    { name: "Thomas", details: { age: 26, type: "flemmard" } },
    { name: "Léa", details: { age: 62, type: "costaud" } },
  ];
  
  const [data, setData] = useState(dataArray)
  const [data2, setData2] = useState(dataObjects)

  return (
    <div className="App">
      <div>
        <h1>Data Array</h1>
        {data.map((item, index) => <p key={index}>{item}</p>)}
      </div>
      <div>
        <h1>Data Objects</h1>
        {data2.map((item, index) => <p key={index}>{item.name} | {item.details.age} ans | {item.details.type}</p>)}
      </div>
    </div>
  );
}

export default App;

Ok si tout s’est bien passé vous affichez maintenant les données des deux différentes listes bravo 😉

Etape 2 : Création du Component SearchBar ! 🔍

Ca y est c’est déjà l’heure de créer votre petit component !

Vous pouvez par exemple le créer à l’emplacement src/SearchBar.js

Le component aura besoin de 3 Props :

  • list : la liste à filtrer
  • setList : La fonction de callback qui permet de faire l’update en fonction de la recherche
  • filterField : Encore une fonction de callback qui va nous permettre de choisir sur quel champs filtrer en cas de liste d’objet ! On peut laisser cette propriété vide et elle sera par défaut adaptée à une liste de String (dataArray)
// SearchBar.js

import React, { useEffect, useState } from 'react'

const SearchBar = ({list, setList, filterField = item => item, ...props}) => {
...

Bon c’est bien beau mais maintenant il faut faire quelque chose de ces propriétés, allez on continue voici le component complet :

 // SearchBar.js 
 
import React, { useEffect, useState } from 'react'

const SearchBar = ({list, setList, filterField = item => item, ...props}) => {
  const [value, setValue] = useState("")

  useEffect(() => {
    if (value) {
      setList(filterList())
    }
    else {
      setList(list)
    }
  }, [value])

  const filterList = () => {
    return list.filter(item => filterField(item).toLowerCase().includes(value.toLocaleLowerCase()))
  }

  const handleChange = event => {
    setValue(event.target.value)
  }

  return (
    <input type="text" placeholder="search ..." name="search" onChange={handleChange} value={value} {...props}/>
  )
}

export { SearchBar };

C’est tout ? Et oui il n’en faut pas plus pour filtrer nos données ! Ce qui se passe :

  • Dès que notre input change, on met la valeur (value) de la recherche à jour
  • Lorsque value change on filtre de nouveau la listedans le useEffect
  • La fonction filterList nous renvoie la liste de base filtrée avec notre fonction de callback filterField
  • Et c’est filtré !

Etape 3 : Utilisation du Component SearchBar 🌟

Oui c’est finit mais c’est pas non plus finit il faut encore que je vous montre comment utiliser le component depuis App.js juste au cas où !

⚠ Attention à bien passer une liste fixe en propriété et pas celle du state par exemple

// App.js  
  ...
  return (
    <div className="App">
      <div>
        <h1>Data Array</h1>
        <SearchBar list={dataArray} setList={setData}/>
        {data.map((item, index) => <p key={index}>{item}</p>)}
      </div>
      <div>
        <h1>Data Objects</h1>
        {/* <SearchBar placeholder={"filter by age"} filterField={(item) => item.details.age.toString()} list={dataObjects} setList={setData2}/> */}
        {/* <SearchBar placeholder={"filter by name"} filterField={(item) => item.name} list={dataObjects} setList={setData2}/> */}
        <SearchBar placeholder={"filter by type"} filterField={(item) => item.details.type} list={dataObjects} setList={setData2} style={{width:"100%"}}/>
        {data2.map((item, index) => <p key={index}>{item.name} | {item.details.age} ans | {item.details.type}</p>)}
      </div>
    </div>
  );

Et voilà je vous ai mis quelques exemples d’utilisation, à vous de jouer pour styliser tout ça et l’adapter à vos besoins 😉

Je partage chaque semaine des conseils pour les Développeurs Freelance

Entrez votre adresse mail

En savoir plus