Vi esta publicación de 2017 donde se preguntaba cómo elevar el estado dos niveles en reacción. La respuesta usó this en el contexto de un diseño OOP. Cinco años más tarde, los componentes se pueden escribir en programación funcional, omitiendo en gran medida el uso de la palabra clave this .

¿Cuál es la forma más sencilla de elevar el estado a cualquier número arbitrario, n, niveles? ¿Es esto algo que se logra mejor con herramientas como redux o Vanilla React es suficiente?

Por ejemplo, no estoy seguro de cuál es la mejor manera de pasar deleteItemHandler (anotado en los comentarios en línea) de la aplicación al elemento, pasando por Display.

 function App() { const [todoList, todoListSetter] = useState([]); const addTodoHandler = (item) => { todoListSetter((prevItems) => { return [item, ...prevItems] }); }; const deleteItemHandler = (item) => { //Level 1 todoListSetter((prevItems) => { return prevItems.filter(elem => elem !== item) }); }; return ( <div > <Display removeItem={deleteItemHandler} items={todoList} /> //Level 1->2 <Form onSaveItem={addTodoHandler}/> </div> ); }; const Display = (props) => { props.items.map((item) => { return( <div> <Item deleteItemHandler={props.removeItem} value={item}/> //Level 2->3 </div>) }); }; const Form = (props) => { const [newItem, setNewItem] = useState(""); const newItemHandler = (event) => { setNewItem(event.target.value); }; const submitHandler = (event) => { event.preventDefault(); props.onSaveItem; }; return( <div> <h2>Add item to todo list</h2> <form onSubmit={submitHandler}> <label>New Item</label> <input type='text' onChange={newItemHandler} /> </form> </div> ) }; const Item = (props) => { return( <div> <h1>{props.value}</h1> <button onClick={props.deleteItemHandler}>Delete Item</button> //Level 3 </div> ) }; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') );