How to set state with a dynamic key name in ReactJS ?

Last Updated : 13 Nov, 2023

When working with ReactJS, managing state is a fundamental aspect of building dynamic and interactive user interfaces. In some cases, you may encounter situations where you need to set a state with a dynamic key name, rather than a fixed one. This can be particularly useful when dealing with dynamic data or when you want to update the state based on user input or other dynamic factors.

Prerequisites:

Approach:

To set a state with a dynamic key name in ReactJS we will use the setState method with the dynamic data. We will take the user input as the dynamic data and when the button is clicked it will call the setState method and update the state.

Steps to Create a React Project:

Step 1: Create a react application by typing the following command in the terminal.

npx create-react-app project_name

Step 2: Now, go to the project folder i.e. project_name by running the following command.

cd project_name

Project Structure:

Example: This example implements dynamic state changes on click by taking the user input.

JavaScript

// Filename -  App.js

import React, { Component } from "react";

class App extends Component {
    constructor() {
        super();
        this.state = {
            name: "",
            value: " ",
        };
    }

    render() {
        return (
            <div>
                <p>Enter State Name:</p>
                <input
                    onChange={(e) => {
                        this.setState({
                            name: e.target.value,
                        });
                    }}
                    type="text"
                ></input>
                <p>Enter State Value:</p>
                <input
                    onChange={(e) => {
                        this.setState({
                            value: e.target.value,
                        });
                    }}
                    type="text"
                ></input>
                <br />
                <br />
                <button
                    onClick={() => {
                        this.setState({
                            [this.state.name]:
                                this.state.value,
                        });
                    }}
                >
                    Create a dynamic state
                </button>
                {this.state[this.state.name] ? (
                    <p>
                        {this.state.name}:
                        {this.state[this.state.name]}
                    </p>
                ) : null}
            </div>
        );
    }
}

export default App;