Tengo una aplicación de reacción con una estructura similar al siguiente código (pero más complejo). En realidad, todo lo que estoy cambiando son los datos en el componente nieto ( grandchild.name en este ejemplo). Sin embargo, tengo que pasar controladores getters (props) y setters (onChange) en todos los componentes a lo largo de la jerarquía, lo que lo hace innecesariamente complicado (especialmente si se agregan más componentes anidados (por ejemplo GreatGrandChild ).

 // Parent const Parent = () => { const [child, setChild] = useState({ name: 'Jack', grandChild: { name: 'John' } }); return ( <div> <Child data={child} onChange={newChild => setChild(newChild)} /> </div> ); }; // Child const Child = props => { const handleChange = newGrandChild => { props.onChange({ name: props.data.name, grandChild: newGrandChild }); }; return ( <div> <GrandChild data={props.data.grandChild} onChange={handleChange} /> </div> ); }; // Grand Child const GrandChild = props => { const handleChange = e => { props.onChange({ name: e.target.name }); }; return ( <div> <input type='text' onChange={handleChange} /> </div> ); };

Entonces, ¿cómo se puede actualizar el estado principal sin agregar la función handleChange en el componente secundario? Escuché que el "curring de funciones" puede resolver esto, pero no sé cómo usarlo en este caso.

PD: necesito una solución que no incluya Contextos y/o Reductores, ya que sería excesivo para mi caso de uso. Además, crear una función "updateGrandChild" en el padre y pasarla al componente nieto tampoco funcionará, ya que mi estructura de datos incluye una propiedad de matriz, donde el índice es dinámico.