Component button call a function in parent

Question

I have this Parent Component:

import React from "react";
import ReactDOM from "react-dom";
import "./App.css";
import Instructions from "./components/instructions/instructions";
import Generate from "./components/button/button";
import View from "./components/view/view";

export class Generator extends React.Component {
    constructor () {
        super()
        this.state = { 
        onView: '0' 
      }  
    }
      btnClick() {
      var x = Math.ceil(Math.ceil(Math.random()) / Math.random());
      console.log(x);
     }

  render() {

  return (
    <div className="container">
    <Instructions />
    <Generate currentClick={this.btnClick}/>
    <View show={this.state.onView}/>
    </div>
    );
  }
}

export default Generator;

and I have this child component:

import React from "react";

class Generate extends React.Component {
    constructor(props) {
        super(props)
        }

        handleClick = () => {
            this.props.btnClick();
        }

    render() {

    return (
        <div className="gen-box">
        <button 
        type="button" 
        className="gen-btn" 
        onClick={this.handleClick}>
        generate 
        </button>
        </div>
        );
    }
}

export default Generate;

Now, I want that every click in the button component, to activate a function in the parent component to generate a random number. My code here did not work like I expected, were did I go wrong?

Answer 1

You are exposing the function with prop name currentClick . It's like you are assigning function to currentClick .

You can use like this.

import React from "react";
class Generate extends React.Component {
  constructor(props) {
    super(props)
  }
  handleClick = () => {
    this.props.currentClick();
  }
  render() {
    return (
      <div className="gen-box">
        <button
          type="button"
          className="gen-btn"
          onClick={this.handleClick}>
          generate
        </button>
      </div>
    );
  }
}
export default Generate;

Or directly call the function in onclick.

import React from "react";
class Generate extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div className="gen-box">
        <button
          type="button"
          className="gen-btn"
          onClick={this.props.currentClick}>
          generate
        </button>
      </div>
    );
  }
}
export default Generate;

Answer 2

You are calling a wrong function, call this.props.currentClick(); from child. And Make Parent btnClick function as narrow funtion or bind it, and then set that random value to state, after that you can see random number each time you click child button.

Answer 3

Your child component onClick function suppose to be like this.

  handleClick = () => {
        this.props.currentClick();
    }

from parent your sending props as

 <Generate currentClick={this.btnClick}/>

where currentClcik is the props suppose to be called in the child component and not btnClick

Answer 4

you have to use a callback function as prop for the children component, like this:

Generator:

import React from "react";
import ReactDOM from "react-dom";
import "./App.css";
import Instructions from "./components/instructions/instructions";
import Generate from "./components/button/button";
import View from "./components/view/view";

export class Generator extends React.Component {
    constructor () {
        super()
        this.state = { 
          onView: '0' 
        }  
    }

    btnClick() {
      var x = Math.ceil(Math.ceil(Math.random()) / Math.random());
      console.log(x);
    }

  render() {
  return (
    <div className="container">
    <Instructions />
    <Generate currentClick={this.btnClick}/>
    <View show={this.state.onView}/>
    </div>
    );
  }
}

export default Generator;

Generate:

import React from "react";

class Generate extends React.Component {
    constructor(props) {
        super(props)
        }

        handleClick = () => {
            this.props.currentClick();
        }

    render() {

    return (
        <div className="gen-box">
        <button 
        type="button" 
        className="gen-btn" 
        onClick={this.handleClick}>
        generate 
        </button>
        </div>
        );
    }
}

export default Generate;

You have to use the same name as the prop that you're passing to the Children Generate component. Hope this helps.