I just started with React hooks and trying to have 3 buttons which I can click on and it should tell me how many times it was clicked. I can make them separately working but that's not performant.
Therefore I was looking for making it useful with just two classes: one for the buttons and the other one for the counter part. But now I'm struggling with calling the functions and separating (which one is clicked) the buttons.
import React, { useState } from "react";
import Counter from "./Counter";
const Buttons = () => {
const HandleClick = () => {
setCounter(count + 1);
};
const [count, setCounter] = useState(0);
return (
<div>
<button className={"GoodBtn"} onClick={HandleClick}>
Good
</button>
<button className={"NeutralBtn"} onClick={HandleClick}>
Neutral
</button>
<button className={"BadBtn"} onClick={HandleClick}>
Bad
</button>
</div>
);
};
export default Buttons;
import React, { useState } from "react";
import Buttons from "./Buttons";
const Counter = () => {
const [count, setCount] = useState(0);
const teller = () => count + 1;
return (
<div>
<h2>Statistics</h2>
<p>Good {Buttons.count}</p>
<p>Neutral {Buttons.count}</p>
<p>Bad {Buttons.count}</p>
</div>
);
};
export default Counter;
Aucun commentaire:
Enregistrer un commentaire