CODEWITHSUNDEEP
javascriptreactjs
Pruthvi
Pruthvi

Reputation: 89

Handling an onClick() method from Child to Parent (React)

So I have 2 components: Button and App. The Button component maps a set of buttons from an array and is called in the App parent. Now, when I click a button in the Button component, I want it to return that particular id along with its name to the parent component, so that it can be set in the app.

Here's my code:

App.JS:

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import Button from "./Button.js";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      displayTop: "test",
      displayBot: 0,
    };
  }

  render() {
    return (
      <div id="container">
        <div id="displayTop">{this.state.displayTop}</div>
        <div id="display">{this.state.displayBot}</div>
        <Button />
      </div>
    );
  }
}
export default App;

Button.JS

import React from "react";
import "./Button.css";

const buttonData = [
  { id: "clear", name: "AC" },
  { id: "divide", name: "/" },
  { id: "multiply", name: "*" },
  { id: "seven", name: "7" },
  { id: "eight", name: "8" },
  { id: "nine", name: "9" },
  { id: "subtract", name: "-" },
  { id: "four", name: "4" },
  { id: "five", name: "5" },
  { id: "six", name: "6" },
  { id: "add", name: "+" },
  { id: "one", name: "1" },
  { id: "two", name: "2" },
  { id: "three", name: "3" },
  { id: "equals", name: "=" },
  { id: "zero", name: "0" },
  { id: "decimal", name: "." },
];

class Button extends React.Component {
  constructor() {
    super();
  }

  render() {
    const info = buttonData.map((info) => (
      <button id={info.id}>{info.name}</button>
    ));

    return info;
  }
}

export default Button;

Any help would be appreicated!

Thanks!

Upvotes: 0

Views: 42

Answers (2)

Mahdi Ghajary
Mahdi Ghajary

Reputation: 3263

You have to pass a prop from your App component and then use it for each onClick attribute of your buttons.

 class App extends React.Component {
      constructor() {
        super();
        this.state = {
          displayTop: "test",
          displayBot: 0,
        };
      }

      getData = (id, name) => console.log(id, name);

      render() {
        return (
          <div id="container">
            <div id="displayTop">{this.state.displayTop}</div>
            <div id="display">{this.state.displayBot}</div>
            <Button onClick={getData} />
          </div>
        );
      }
        }
        export default App;

And then in Button component: 

import React from "react";
import "./Button.css";

const buttonData = [
  { id: "clear", name: "AC" },
  { id: "divide", name: "/" },
  { id: "multiply", name: "*" },
  { id: "seven", name: "7" },
  { id: "eight", name: "8" },
  { id: "nine", name: "9" },
  { id: "subtract", name: "-" },
  { id: "four", name: "4" },
  { id: "five", name: "5" },
  { id: "six", name: "6" },
  { id: "add", name: "+" },
  { id: "one", name: "1" },
  { id: "two", name: "2" },
  { id: "three", name: "3" },
  { id: "equals", name: "=" },
  { id: "zero", name: "0" },
  { id: "decimal", name: "." },
];

class Button extends React.Component {
  constructor() {
    super();
  }

  handleClick = (id, name) => () => {
    props.onClick(id, name)
  }
  render() {
    const info = buttonData.map((info) => (
      <button onClick={handleClick(info.id, info.name)} id={info.id}>{info.name}</button>
    ));

    return info;
  }
}

export default Button;

Upvotes: 0

Jackyef
Jackyef

Reputation: 5012

You can pass a click handler to your Button component from the parent component as props. For example, onClick.

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      displayTop: "test",
      displayBot: 0,
    };
  }

  handleClick = (id, name) => {
      console.log('you just clicked', { id, name });
  }

  render() {
    return (
      <div id="container">
        <div id="displayTop">{this.state.displayTop}</div>
        <div id="display">{this.state.displayBot}</div>
        <Button onClick={this.handleClick} />
      </div>
    );
  }
}

And call the handler function while passing the data you want to pass as parameters.

class Button extends React.Component {
  constructor() {
    super();
  }

  render() {
    const { onClick } = this.props;
    const info = buttonData.map((info) => (
      <button id={info.id} onClick={() => onClick(info.id, info.name)}>{info.name}</button>
    ));

    return info;
  }
}

Upvotes: 1

Related Questions