React: Setting State for Deeply Nested Objects w/ Hooks

Question

I\'m working with a deeply nested state object in React. My code base dictates that we try to stick with function components and so every time I want to update a key/value pair

Answer 1

Another approach is to use the useReducer hook

const App = () => {      
  const reducer = (state, action) =>{
    return {...state, [action.type]: action.payload}
  }
  
  const [state, dispatch] = React.useReducer(reducer,{
    propA: 'foo1',
    propB: 'bar1'
  });
  
  const changeSelect = (prop, event) => {
    const newValue = event.target.value;
    dispatch({type: prop, payload: newValue});
  }
  
  return(
    
      
My nested state:
      
{JSON.stringify(state)}
       changeSelect('propA', e)}
      >
        foo1
        foo2
        foo3
      
       changeSelect('propB', e)}
      >
        bar1
        bar2
        bar3
      
    
  );
}

ReactDOM.render(, document.getElementById('root'));