I have only used useReducer for simple use cases, and this is kind of throwing me for a loop. ATM when I change the input of any of the form elements, it changes the value for all inputs. Any advice would be greatly appreciated. I can provide additional information need be. Thanks in advance!
—REDUCER COMPONENT— export const ACTIONS = { UPDATE: “update”, SET: “set”, RESET: “reset”, }; export const initialEmployee = { firstName: “”, lastName: “”, middleInitial: “”, // email: “”, // isManager: true, department: { isActive: true, name: “”, }, jobTitle: { isActive: true, name: “”, }, manager: { firstName: “”, lastName: “”, }, }; export default (state, action) => { const { employee, firstName, lastName, middleInitial, // email, // isManager, department, jobTitle, manager, } = action; switch (action.type) { case ACTIONS.UPDATE: return { …state, [employee]: firstName, lastName, middleInitial, // email, // isManager, department, jobTitle, manager, }; case ACTIONS.SET: return { …state, [employee]: firstName, lastName, middleInitial, // email, // isManager, department, jobTitle, manager, }; case ACTIONS.RESET: return initialEmployee; default: return state; } }; —FORM COMPONENT— const [state, dispatch] = useReducer(EmployeeReducer, initialEmployee); const onChangeHandler = (e) => dispatch({ type: ACTIONS.SET, employee: “firstName, lastName, middlieInitial,department, jobTitle, manager”, firstName: e.currentTarget.value, lastName: e.currentTarget.value, middleInitial: e.currentTarget.value, // email: e.currentTarget.value, // isManager: e.currentTarget.value, department: e.currentTarget.name.value, jobTitle: e.currentTarget.value, manager: e.currentTarget.value, }); return ( <div> <label htmlFor=”create-employee”>Create Employee</label> <form onSubmit={submitHandler} name=”create-employee”> <label htmlFor=”first-name”>First Name</label> <input type=”text” name=”first-name” onChange={onChangeHandler} value={state.firstName} required /> <label htmlFor=”last-name”>Last Name</label> <input type=”text” name=”last-name” onChange={onChangeHandler} value={state.lastName} required /> <label htmlFor=”middle-initial”>Middle Initial</label> <input type=”text” name=”middle-initial” onChange={onChangeHandler} value={state.middleInitial} required /> <label htmlFor=”job-title”>Job Title</label> <select name=”job-title” onChange={onChangeHandler} value={state.version} > {jobTitles.map((title) => { return ( <option key={title.id} value={title.name}> {title.name} </option> ); })} </select> <label htmlFor=”department”>Department</label> <select name=”departments” onChange={onChangeHandler} value={state.version} > {depts.map((dept) => { return ( <option key={dept.id} value={dept.name}> {dept.name} </option> ); })} </select> {/* <input type=”radio” value=”management” /> Management <input type=”radio” value=”non-management” />{” “} Non-management */} <label htmlFor=”managers”>Manager</label> <select name=”managers” onChange={onChangeHandler} value={state.version} > {employees.map((emp) => { return ( <option key={emp.id} value={`${emp.firstName}-${emp.lastName}`}> {`${emp.firstName} ${emp.lastName}`} </option> ); })} </select> <button data-testid=”create-employee-save-button”>Save</button> </form> </div> ); };
submitted by /u/BigAcanthocephala160
[link] [comments]