I have two components in my project.

One is App.jsx

One is Child.jsx

In App, there is a state holding array of child state objects. All create, manage, and update of the child state is through a set function from parent.

So, Child componment doesnt have its own state. For some reason, it is my intention not to have child own state, because it matters.

However, at some points, I found it that passing data into child would be hard to manage.

Question:

So, is there a way that let the child to access the data from parent by themselves not by passing down, while having them be able to update the state like my code.

People say useContext may work, but I dont quite see how.

A example to illustrate would be prefect for the improvement.

<div id="root"></div><script src="https://unpkg.com/[email protected]/umd/react.development.js"></script><script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
<script type="text/babel" data-type="module" data-presets="env,react">


const {StrictMode, useState} = React;


function getInitialChildState () {
  return {
    hidden: false,
    id: window.crypto.randomUUID(),
    text: '',
  };
}


function Child ({text, setText}) {
  return (
    <div className="vertical">
      <div>{text ? text : 'Empty