How to pass the data from child to parent? when parent is class based and child is functional based

Question

I want to pass the data which is anything like, array, strings, numbers into the App(Parent) Component) from the Child1(Child) components.

There\'s a parent who is class

Answer 1

In your child component if you want to send some data to the parent upon clicking a button for example:

import React from 'react'

const Child1 = React.memo((props) => {
    return (
        

          {props.clicked('some data')}} type="button">Click me to send data
        
    );
})

export default Child1;

now you can assign a function to the clicked prop in your parent component and that gets called when the button in the child component is clicked:

class App extends Component {
  state = { message: "" };

  callbackFunction = (event) => {
    this.setState({
      message: event.target.value
    });
  }

  clicked = (data) => {
   console.log(data);
  }

  render() {
    return (
      

        
      
    );
  }
}