In my project there are a lot of inputs so I've created each one of its own useState, is there any way to reduce the use of useState
part of the code
const [OldGpa, setOldGpa] = useState(0);
const [oldHours, setOldHours] = useState(0);
const [firstHour, setFirstHour] = useState(0);
const [secondHour, setSecondHour] = useState(0);
const [threadHour, setThreadHour] = useState(0);
const [fourthHour, setFourthHour] = useState(0);
const [fifthHour, setFifthHour] = useState(0);
const [sixthHour, setSixthHour] = useState(0);
const [seventhHour, setSeventhHour] = useState(0);
const [firstPoint, setFirstPoint] = useState(0)
const [secondPoint, setSecondPoint] = useState(0)
const [threadPoint, setThreadPoint] = useState(0)
const [fourthPoint, setFourthPoint] = useState(0)
const [fifthPoint, setFifthPoint] = useState(0)
const [sixthPoint, setSixthPoint] = useState(0)
const [seventhPoint, setSeventhPoint] = useState(0)
const [GPA, setGPA] = useState(0)
code path: src/componentes/Form.js you can find the code here: https://codesandbox.io/s/jovial-smoke-yz1mk5?file=/src/components/Form/Form.js
If you don't want to use any library, you can make all of your inputs an object like so :
const [inputs, setInputs] = useState({
OldGpa: 0,
oldHours: 0,
firstHour: 0,
secondHour: 0,
thirdHour: 0,
fourthHour: 0,
fifthHour: 0,
sixthHour: 0,
seventhHour: 0,
firstPoint: 0,
secondPoint: 0,
thirdPoint: 0,
fourthPoint: 0,
fifthPoint: 0,
sixthPoint: 0,
seventhPoint: 0
});
Now your state in an object so you have to "bind" value with value={inputs.property}
Your inputs will need a name attribute in order to update the right property on this object (understand, name attribute will have to be the same as the object property). You'll need to "copy" the prevState like so:
setInputs(prevState => ({
...prevState,
[name] : value
}))
Where name and value come from event
E.G
const handleInputs = (event) => {
// destructuring the object
let {target } = event;
let { name, value } = target;
setInputs(prevState => ({
...prevState,
[name] : value
}))
}
Or you can destructure the event right into the function parameter like so:
const handleInputs = ({target: { value, name}}) => {
setInputs(prevState => ({
...prevState,
[name] : value
}))
}
// Outside the component:
const initialHours = Array(7).fill(0);
const initialPoints = Array(7).fill(0);
// Inside the component:
const [OldGpa, setOldGpa] = useState(0);
const [oldHours, setOldHours] = useState(0);
const [hours, setHours] = useState(initialHours);
const [points, setPoints] = useState(initialPoints);
const [GPA, setGPA] = useState(0)
Then whenever you used secondHour, for instance, you'd use hours[1] instead.
Instead of setSecondHour(newValue), it would be:
setHours(hours => {
hours = hours.slice(); // Copy the array
hours[1] = newValue;
return hours;
});
Sometimes you see people do that with spread and multiple slice calls, or with Object.assign, but to me those are clunky and unnecessarily complex. If you want to avoid rewriting that logic every time (which is a reasonable thing to want), write a utility function:
function setArrayElement(array, index, value) {
array = array.slice();
array[index] = value;
return array;
}
and use that when setting the second value:
setHours(hours => setArrayElement(hours, 1, newValue));
If you want, you can combine things further into an object that you store in state, as shown in the documentation.
Note
Unlike the
setStatemethod found in class components,useStatedoes not automatically merge update objects. You can replicate this behavior by combining the function updater form with object spread syntax:const [state, setState] = useState({}); setState(prevState => { // Object.assign would also work return {...prevState, ...updatedValues}; });Another option is
useReducer, which is more suited for managing state objects that contain multiple sub-values.
(I'm not sure I agree with the "more suited" part, but useReducer is another option.)
You can consider this as a reference :
function init(initialCount) {
return {count: initialCount};
}
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
case 'reset':
return init(action.payload);
default:
throw new Error();
}
}
function Counter({initialCount}) {
const [state, dispatch] = useReducer(reducer, initialCount, init);
return (
<>
Count: {state.count}
<button
onClick={() => dispatch({type: 'reset', payload: initialCount})}>
Reset
</button>
<button onClick={() => dispatch({type: 'decrement'})}>-</button>
<button onClick={() => dispatch({type: 'increment'})}>+</button>
</>
);
}
Similarly , you can modify according to your use case:
So, the answer to your question is ... to use useReducer instead of useState .