How to access data of Child Component from parent component in react js

If I understand your question correctly -- at a high level, you're trying to figure out how to update a state variable of a parent component from within a child component. Easiest way would be with the useState hook, and then by passing the setState function to the child component.

const ParentComponent = () => {
  const [state, setState] = useState([])

  useEffect(() => {
    // logic that will be executed every time the state variable changes 
  }, [state])

  return <ChildComponent setState={setState} />
}

const ChildComponent = ({setState}) => {
  const handleClick = () => {  
    setState((currentState) => currentState.concat(1))
  }
  
  return <Button onClick={handleClick} />
}

Edit: To answer your question from the comment -- a few things to point out here:

• You can pass a value to useState which will be the starting value of the variable. In our example, it's an empty array
• setState has access to the current state, so you can push a value to an array with this syntax: setState((previousState) => previousState.concat(val))
• useEffect is a hook which is invoked whenever there's a change in the value of the dependency (or dependencies) passed in the second argument. So by including state in its dependency array, we can execute whatever logic we want every time the value of the state variable changes
• I would also recommend looking into useMemo. It similarly allows you to have aspects of your component logic that are re-executed only when values of certain variables change. For example:

const ParentComponent = () => {
  const [state, setState] = useState([])

  useEffect(() => {
    // logic that will be executed every time the state variable changes 
  }, [state])

  const renderCards = useMemo(() => {
    return state.map(val => <SomeOtherComponent val={val}/>)
  }, [state])

  return (
    <div>
      {renderCards}
      <ChildComponent setState={setState} />
    </div>
  )
}

By wrapping the function inside renderCards in the useMemo hook, the evaluated result is "memoized". And so it won't be executed on every render, unless the variable in the dependency array changes.

Passing down setState to a child component in order to trigger a re-render in the parent component is straightforward when it's an immediate child. If the child component is nested deeper, or there are multiple components that need to react to a change in a variable (e.g. light/dark mode) -- that's when you want to look into a state management tool like Redux or Context.