0
votes

Hey everybody I wonder if someone would be able to help me understand useReducer. It was suggested to me by someone because I am using a form with lots of inputs which I would like to dynamically other areas of the app. I'm new to react and i'm struggling to get it to work as I would like. Here is what I am working with so far.

    const Form= () => {
const useReducerState = (initialState = {
    
}) => {    
    const reducer = (prev, next) => ({ ...prev, ...next });
    return useReducer(reducer, initialState);
};

const [state, setState] = useReducerState({
input1: "",
input2: "",
input 3: "",
input 4: "",
input 6: "",
input 7: "",
input 8: "",
input 9: "",
 });


 const handleChange = (e) => {        
    let proToUpdate = e.target.name;
    let value = e.target.value;
    setState({ [proToUpdate]: value });    
     }

const {
    input 1,
    input 2,
    input 3,
    input 4,
    input 5, 
    input 6,
    input 7,
    input 8,
    input 9
    
} = state;



return ( jsx form with inputs matching the state above ) } 

The guide I followed seems to have formatted it differently to how it's done on other guides. As I don't really understand what's going on I'm unable to reset the form to the default values, which seems to be the main point of reducer. Teach me to try and cheat and just copy someone else's homework I guess :)

To be more precise, why is the initial state at the bottom in the const{} rather that at the top within the initialState = {}.Mark Scholes