Component button call a function in parent

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; 

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.

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

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.