samedi 27 novembre 2021

React Hooks with button on clicks

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