Not able to pass data between components in React

Question

I am making a simple calculator app with react in which I want to display the value of the button component in the Display component, but I'm not getting how to do this

Here are the Codes :

Code Of Calculator Component:

import React from "react";
import "./Calculator.css";
import Button from "./Button";
import { useState } from "react";
import Display from "./Display";

const Calculator = () => {
  const [Data, setData] = useState("");
  return (
    <>
      <center>
        <h1 className="title">Calculator</h1>
        <br />
        <Display data={Data} />
        <div className="btncontainer">
          <Button name="+" onClick={() => setData("+")}></Button>
          <Button name="-" onClick={() => setData("-")}></Button>
          <Button name="/" onClick={() => setData("/")}></Button>
          <Button name="X" onClick={() => setData("X")}></Button>
          <Button name="1" onClick={() => setData("1")}></Button>
          <Button name="2" onClick={() => setData("2")}></Button>
          <Button name="3" onClick={() => setData("3")}></Button>
          <Button name="4" onClick={() => setData("4")}></Button>
          <Button name="5" onClick={() => setData("5")}></Button>
          <Button name="6" onClick={() => setData("6")}></Button>
          <Button name="7" onClick={() => setData("7")}></Button>
          <Button name="8" onClick={() => setData("8")}></Button>
          <Button name="9" onClick={() => setData("9")}></Button>
          <Button name="0" onClick={() => setData("0")}></Button>
          <Button name="=" onClick={() => setData("=")}></Button>
        </div>
      </center>
    </>
  );
};

export default Calculator;
 

Code Of Display Component:

import React from "react";

const Display = (props) => {
  console.log("Props in display : ", props);
  const handleOnChange = (e) => {
    props.data = e.target.value;
  };
  return (
    <input type="text" value={props.data} onChange={handleOnChange} readOnly />
  );
};

export default Display;
 

Code Of Button Component:

import React from "react";
import "./Button.css";
const Button = (props) => {
  return (
    <input
      type="button"
      className="btn"
      value={props.name}
      onClick={props.onClick(props.name)}
    ></input>
  );
};

export default Button;
 

As I've just started learning React, please ignore my silly mistakes

Answer 1

In the Button component, if you want to pass an argument to the function, you want to set the onClick to an arrow function.

onClick={()=>props.onClick(props.name)}

In the Display component, you should pass in the setData function and use that for the onChange.

onChange={(e)=>setData(e.target.value)}

If you want a string of all the buttons clicked, you can change the button onClick to add to the current value of data instead of replacing it. For example, for button 5:

onClick={()=>setData(data+'5'}