Best (functional) way in React to lift state an arbitrary number of levels?-CodePudding

I saw this post from 2017 where it was asked how to lift state up two levels in react. The answer used this in the context of an OOP design. Five years later, components can be written in functional programming, largely omitting usage of the this keyword.

What's the simplest way to lift state up any arbitrary number, n, levels? Is this something best accomplished with tools like redux or is vanilla React sufficient?

For example, I'm unsure how to best pass deleteItemHandler (noted in inline comments) from App to Item, passing through 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')
);

CodePudding user response：

Here is the example given from the React documentation for the useContext hook:

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

const ThemeContext = React.createContext(themes.light);

function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}