score:0

Accepted answer
  1. renderbutton is a function component and, therefore, needs to be in pascalcase: renderbutton (although it would be better off as button).

  2. move handleclick to the child component.

  3. then in button the call to handleclick should be props.handleclick since handleclick will now be a property of the props object passed into the component. we don't need to pass down the data as a prop to the button but can, instead just log the data prop passed into child.

    handleclick = () => {
      console.log(`handleclick(): ${props.datafromapp}`);
    }
    
  4. in child, instead of calling renderbutton, import button, and then use that in the render passing down the handler in the props. by doing this you're making the component as "dumb" as possible so it can be reused elsewhere in the application.

    <button handleclick={this.handleclick} />
    

Related Query

More Query from same tag