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

I have founded another solution for you using combine Functional-Class-functional component pass data. here the live code for https://codesandbox.io Click and check that.

Also same code added bellow here:

app component

import React, { useState } from "react";
import "./styles.css";

import Child from "./child";

export default function App() {
  const [name, setName] = useState("Orignal Button");
  const [count, setCount] = useState(0);

  const handleClick = _name => {
    setName(_name);
    setCount(count + 1);
  };

  const resetClick = e => {
    setName("Orignal Button");
    setCount(0);
  };

  return (
    

      
Hello CodeSandbox
      
    
  );
}

child1 component

import React from "react";

import Child2 from "./child2";

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

  render() {
    return (
      <>
        
This is child
         this.props.handleClick("New Name changed")}>
          {this.props.name}
        
        
      
    );
  }
}

export default Child;

Another component Child2

import React from "react";

const Child2 = props => {
  return (
    <>
      
Child 2
       props.handleChilc2Click(e)}>
        Click me for reset Parent default
      
    
  );
};

export default Child2;

You can some help from it. Thanks