Argument d'une arrow function

Salut,

Je suis novice en React et j'aimerai comprendre une partie du code suivant:

Comment incrementValue reçoit la valeur de increment ? Quelle est le lien entre les deux ? D'où incrementValue sait qu'il soit prendre la valeur de increment ?

Merci.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

function App() { const [counter, setCounter] = useState(0); const incrementCounter = (incrementValue) => setCounter(counter+incrementValue); return ( <div> <Button onClickFunction={incrementCounter} increment={1} /> <Button onClickFunction={incrementCounter} increment={5} /> <Button onClickFunction={incrementCounter} increment={10} /> <Button onClickFunction={incrementCounter} increment={100} /> <Display message={counter}/> </div> ); }

---

La réponse doit être dans ton composant Button. il doit y avoir qqch comme :

Code:

---

1 2 3

const {onClickFunction, increment } = props; return (<button onclick={() => onClickFunction(increment)}></button>);

---

Code:

---

1 2 3 4 5 6 7 8

function Button(props) { const handleClick = () => props.onClickFunction(props.increment); return ( <button onClick={handleClick}> +{props.increment} </button> ); }

---

Voici ma fonction Boutton mais le calcule ne se fait pas à ce niveau la ? => setCounter(counter+incrementValue)
Qui serait donc la valeur du chiffre précédent + la valeur de l'increment sur lequel on a appuyé ?

OK,
j'avais mal compris ta question

Code:

---

1 2 3 4 5 6 7 8 9 10 11

// on a besoin d'utiliser dans le state une valeur qui a pour valeur initiale 0. (appel de useState(0)) // la fonction useState nous renvoie un tableau contenant la valeur actuelle (variabilisée en counter, et une fonction permettant de mettre à jour cette entrée dans le state variabilisée en setCounter) const [counter, setCounter] = useState(0);   // on construit une fonction qui prend un parametre et qui appelle setCounter en ajoutant le parametre à la valeur actuelle de counter const incrementCounter = (incrementValue) => setCounter(counter+incrementValue);   // ... // on passe cette fonction à des composants avec une valeur d'incrément à donner. <Button onClickFunction={incrementCounter} increment={1} />

---

C'est plus clair ?

Hello,

Merci c'est bon tes explications on été clair et j'ai enfin compris le cheminement des choses.
Merci a toi !