Accessing React childs state

Question

I have a React element that renders Child elements with a target state. this target state can change anytime and parent doesn't have access at the moment.

const Parent = () => {
  function getTarget(){
    //TODO
  }

  return(
    <Button>get target</Button>
    {children.map(c=>{
      <Child props={props}/>
    })}
  )
}

const Child = (props) => {
  //props stuff
  const [target, setTarget] = useState(null)
  // this target would be changed by user as they interact.
  
  return(
    //child elements
  )
}

what I'm trying to do is to get the target state of the Child using button in the Parent with following restraints:

1. There can be variable amount of Child elements, but only one of them are visible at a time.

2. The "get target" button has to be in Parent, the "target" state has to be initialized in child, and it's unknown.

because only on Child is active at a time, a solution that works for

return(
  <Button>get target</Button>
  <Child props={props}/>
)

is also fine.

Answer 1

const Parent = () => {
  const [activeTarget, setActiveTarget] = useState(null);

  const handleButton = () => {
    console.log(activeTarget);
  }

  return(
    <Button onClick={handleButton}>get target</Button>
    {children.map(c=>{
      <Child setActiveTarget={setActiveTarget} />
    })}
  )
}

const Child = ({setActiveTarget}) => {
  const [target, setTarget] = useState(null);
  
  // when the user interacts call 'setTarget' and 'setActiveTarget' to update both states
  
  // update parent state when child mounts
  useEffect(() => {
    setActiveTarget(target);
  }, [target]} // you can additionally add dependencies to update the parent state conditionally
  
  return(
    //child elements
  )
}