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?

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 as I expected, where did I go wrong?