Question changement d'état

vp21200
Javascript React

Je suis en train de réaliser un petit calcul automatisé en utilisant les hooks.
Je possède des divs qui sont des articles.
Le composant pour un article est ainsi fait :

function Article({element, handleClick}) {
  const {title Price} = element

  const pushElement = function() {
    handleClick({title:title, price:Price})
  }

  return(
    <div className="price-ctn">
      <div className="price-ctn__head">
        <span>{title}</span>
      </div>
      <span>{Price} € HTT/Mois</span>
      <div className="price-ctn__btn">
        <button value="Ajouter" onClick={pushElement}>Ajouter</button>
      </div>
    </div>
  )
}

Au niveau du composant parent je possède la struture suivante : 

export default function Prix(){
  const [tabPanier, setTabPanier] = useSetData()
  const tab = prix.fr
  return(
    <Layout>
      <div className="page-price">
        <div className="price-main">
          {
            Object.keys(tab).map((key) => {
              return (
                <ContainerDisplay title={tab[key].title}>
                  {
                    tab[key].data.map((el) => {
                      return <Article element={el} handleClick={setTabPanier}/>
                    })
                  }
                </ContainerDisplay>
              )
            })
          }
        </div>
        <div className="horyzontal-bar"></div>
        <Devis tabOfPrice={tabPanier}/>
      </div>

    </Layout>

  )
}

Ici <ContainreDisplay> est un composant permettant de raccourcir le code. A la base ce que contient le composant <ContainerDisplay> comme enfant était présent directement dans la fonction ContainerDisplay et le tableau tab[key] était passé en prop. Mais comme j'avais besoin que Article fasse remonter des éléments au parent Prix, je ne savais pas les remonter de deux niveaux sans faire une chaine de méthode passées en prop.

Ce que je veux
Mais le sujet principal est celui-ci :

Lorsque je clique sur le bouton "ajouter" dans Article, je veux que les informations renvoyés soit traitées par le hook useSetData dont voici le code : 

function useSetData() {
  const [tab, setTab] = useState([])
  const add = function(el) {

    let item = tab.findIndex((row) => row.title === el.title)

    if(item === -1) {
      setTab( tab =>[...tab,{nb: 1,...el}])
    }else{
      let tempTab = [...tab]
      tempTab[item].nb += 1
      setTab(tempTab)
    }

  }
  return [tab, add]
}

Puis le tout est envoyé au composant Devis.
Et le changement d'état du panier (tab) est conditionnel :
si un même produit est présent dans le tableau, je veux augmenter de 1 le nb d'item de ce produit,
sinon je l'ajoute.
Le tableau représentant le panier est structuré ainsi :
[{nb:1,title:nomProduit,price:2}]

Ce que j'obtiens

En soit mon, code est fonctionnel, mais je me dis qu'il y a plus simple pour modifier l'état d'une valeur du tableau.
Du coup ma question se situe surtout au niveau du hook useSetData.

J'espère avoir correctement expliqué mon problème.
Merci d'avance pour celles et ceux qui sauront m'aider !

Aucune réponse