1const { useState } = React;
2
3function PageComponent() {
4  const [count, setCount] = useState(0);
5  const increment = () => {
6    setCount(count + 1)
7  }
8
9  return (
10    <div className="App">
11      <ChildComponent onClick={increment} count={count} />         
12      <h2>count {count}</h2>
13      (count should be updated from child)
14    </div>
15  );
16}
17
18const ChildComponent = ({ onClick, count }) => {
19  return (
20    <button onClick={onClick}>
21       Click me {count}
22    </button>
23  )
24};
25
26ReactDOM.render(<PageComponent />, document.getElementById("root"));

1function App() {
2  return (
3    <div className="App">
4      <GrandParent />
5    </div>
6  );
7}
8
9const GrandParent = () => {
10  const [name, setName] = useState("i'm Grand Parent");
11  return (
12    <>
13      <div>{name}</div>
14      <Parent setName={setName} />
15    </>
16  );
17};
18
19const Parent = params => {
20  return (
21    <>
22      <button onClick={() => params.setName("i'm from Parent")}>
23        from Parent
24      </button>
25      <Child setName={params.setName} />
26    </>
27  );
28};
29
30const Child = params => {
31  return (
32    <>
33      <button onClick={() => params.setName("i'm from Child")}>
34        from Child
35      </button>
36    </>
37  );
38};
39

1import React, { useState } from "react";
2
3let myState = {};
4
5const GrandParent = () => {
6  const [name, setName] = useState("i'm Grand Parent");
7  myState.name=name;
8  myState.setName=setName;
9  return (
10    <>
11      <div>{name}</div>
12      <Parent />
13    </>
14  );
15};
16export default GrandParent;
17
18const Parent = () => {
19  return (
20    <>
21      <button onClick={() => myState.setName("i'm from Parent")}>
22        from Parent
23      </button>
24      <Child />
25    </>
26  );
27};
28
29const Child = () => {
30  return (
31    <>
32      <button onClick={() => myState.setName("i'm from Child")}>
33        from Child
34      </button>
35    </>
36  );
37};
38