Q268- Is there any way we can access child component state in parent component in React?

Yes — but not directly.
React follows one-way data flow, meaning parent → child, so a parent cannot read child state directly.

But React provides 3 proper ways to allow a parent to get or control a child’s state.

Directly? No.
Indirectly? Yes — using one of the patterns below.

---

✅ 1. Lift the State Up (Most Recommended)

Move the state from child → parent, and pass it to the child as props.

Child (stateless)

function Child({ value, setValue }) {
  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
}

Parent

function Parent() {
  const [value, setValue] = useState("");

  return <Child value={value} setValue={setValue} />;
}

✔ Parent fully controls the state
✔ Cleanest + recommended approach

---

✅ 2. Use Callback Function from Parent → Child

Parent sends a function to child.
Child calls it and sends state upward.

Parent

function Parent() {
  const [childData, setChildData] = useState("");

  const receiveFromChild = (data) => {
    setChildData(data);
  };

  return <Child sendData={receiveFromChild} />;
}

Child

function Child({ sendData }) {
  const [text, setText] = useState("");

  return (
    <input
      onChange={(e) => {
        setText(e.target.value);
        sendData(e.target.value); // send state to parent
      }}
    />
  );
}

✔ Parent gets child state
✔ Works without lifting full state

---

✅ 3. Using useImperativeHandle + forwardRef (Access child methods)

Use this when parent needs to call a function inside child, like focus(), scroll(), form reset, play video, etc.

Child.js

import React, { useImperativeHandle, useState, forwardRef } from "react";

const Child = forwardRef((props, ref) => {
  const [count, setCount] = useState(0);

  useImperativeHandle(ref, () => ({
    getCount: () => count
  }));

  return <button onClick={() => setCount(count + 1)}>Increment</button>;
});

export default Child;

Parent.js

function Parent() {
  const childRef = useRef();

  const showChildState = () => {
    alert(childRef.current.getCount());
  };

  return (
    <>
      <Child ref={childRef} />
      <button onClick={showChildState}>Show Child Count</button>
    </>
  );
}

✔ Parent can trigger child functions
✔ Parent can "read" child state indirectly
✔ Useful for forms, animations, inputs

---

✨ Bonus Method (Not recommended for most cases)

4. Global State Managers

• Context API
• Redux / Zustand / Jotai / Recoil

Put state in global store → both parent and child can access it.

---

🎯 Short Interview Answer

A parent cannot directly access a child’s state because React has one-way data flow.
But you can do it by:

1. Lifting state up into the parent
2. Passing a callback from parent → child
3. Using forwardRef + useImperativeHandle to expose child methods
4. Using global state (Context/Redux)

These patterns allow the parent to read or control child state safely.