//[CHILD]: Received data from parent
import { React, useState } from "react";
const Child = (props) => {
const [data, setData] = useState("");
const func = () => {
props.myFunc(data);
};
return (
<>
<input
type="text"
value={data}
onChange={(e) => setData(e.target.value)}
/>
<button onClick={func}>Click</button>
</>
);
};
export default Child;
//[PARENT]:create a callback function in parent
import "./styles.css";
import Child from "./child";
export default function App() {
const receivedData = (data) => {
console.log(data);
};
return (
<div className="App">
<Child myFunc={receivedData} />
</div>
);
}