React is a popular JavaScript library for building dynamic user interfaces. It allows developers to create reusable components that can be rendered and updated dynamically based on changes in data or user interactions. One of the challenges of building complex React applications is managing state. In this blog, we will explore some strategies for working with multiple states in React.
What is state in React?
In React, state refers to any data that is used by a component to render itself. When the state of a component changes, React will automatically re-render the component to reflect the updated data. State can be used to store information such as user input, API responses, or the current state of a game or application.
Working with multiple states
In some cases, a component may need to manage multiple states. For example, a form component may need to store the values of several input fields. There are several strategies for working with multiple states in React.
1. Use an object to store multiple states
One approach is to store multiple states as properties of an object. For example, we could define an object called “formData” with properties for each input field:
class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
formData: {
name: '',
email: '',
phone: ''
}
};
}
handleChange(event) {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState(prevState => ({
formData: {
...prevState.formData,
[name]: value
}
}));
}
render() {
return (
<form>
<label>
Name:
<input type="text" name="name" value={this.state.formData.name} onChange={this.handleChange} />
</label>
<label>
Email:
<input type="email" name="email" value={this.state.formData.email} onChange={this.handleChange} />
</label>
<label>
Phone:
<input type="tel" name="phone" value={this.state.formData.phone} onChange={this.handleChange} />
</label>
</form>
);
}
}
In this example, we use the spread operator to create a new object with the updated value for the input field. We then use setState to update the state of the component with the new object.
2. Use multiple state variables
Another approach is to use separate for each piece of data. For example:
class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
email: '',
phone: ''
};
}
handleNameChange(event) {
this.setState({ name: event.target.value });
}
handleEmailChange(event) {
this.setState({ email: event.target.value });
}
handlePhoneChange(event) {
this.setState({ phone: event.target.value });
}
render() {
return (
<form>
<label>
Name:
<input type="text" value={this.state.name} onChange={this.handleNameChange} />
</label>
<label>
Email:
<input type="email" value={this.state.email} onChange={this.handleEmailChange} />
</label>
<label>
Phone:
<input type="tel" value={this.state.phone} onChange={this.handlePhoneChange} />
</label>
</form>
);
}
}
In this example, we use separate event handles for each input field. When the value of an input field changes, we update the state variable for that field using setState.
3. Use a state management
Another strategy for managing multiple states in React is to use a state management library such as Redux or MobX. These libraries provide a centralized store for application state that can be accessed and updated by any component in the application.
For example, in Redux, we would define a store with a reducer function that handles actions that update the state:
import { createStore } from 'redux';
const initialState = {
name: '',
email: '',
phone: ''
};
function formReducer(state = initialState, action) {
switch (action.type) {
case 'UPDATE_NAME':
return {
...state,
name: action.payload
};
case 'UPDATE_EMAIL':
return {
...state,
email: action.payload
};
case 'UPDATE_PHONE':
return {
...state,
phone: action.payload
};
default:
return state;
}
}
const store = createStore(formReducer);
We can then use the useSelector and useDispatch hooks to access and update the state in our component
import { useSelector, useDispatch } from 'react-redux';
function MyForm() {
const name = useSelector(state => state.name);
const email = useSelector(state => state.email);
const phone = useSelector(state => state.phone);
const dispatch = useDispatch();
function handleNameChange(event) {
dispatch({ type: 'UPDATE_NAME', payload: event.target.value });
}
function handleEmailChange(event) {
dispatch({ type: 'UPDATE_EMAIL', payload: event.target.value });
}
function handlePhoneChange(event) {
dispatch({ type: 'UPDATE_PHONE', payload: event.target.value });
}
return (
<form>
<label>
Name:
<input type="text" value={name} onChange={handleNameChange} />
</label>
<label>
Email:
<input type="email" value={email} onChange={handleEmailChange} />
</label>
<label>
Phone:
<input type="tel" value={phone} onChange={handlePhoneChange} />
</label>
</form>
);
}
In this example, we use the useSelector hook to retrieve the values of the name, email, and phone fields from the Redux store. We then use the useDispatch hook to dispatch actions that update the state in the store.
Conclusion
Managing multiple states in React can be challenging, but there are several strategies that can help simplify the process. By using objects, separate state variables, or state management libraries, we can effectively manage the data and state of our components. Each approach has its advantages and disadvantages, and the best strategy will depend on the specific needs of our application.
Umamaheswaran 
Leave a Reply