How To Set And Access State Using A Dynamic Key In React

This article will show you how to set and access state using a dynamic key in React. Here are some ways to do it with examples to make it easier for readers to understand.

What is the data type?

Variables, parameters, and function return values are probably familiar to anyone who has ever worked with a programming language. They can be found in any programming environment. However, many programmers use those terms by habit without understanding what they tell the computer.

A programmer tells the computer what a variable should be called and what kind of data it contains when defining values. Is it a whole number? Or a rope? The type of data you’re working with is simply what the data type is.

If you’ve ever looked online for information about data types, terms like “static” and “dynamic“, “strong” and “weak” can sometimes get in the way. In this article, we will learn the terms for these different things.

Remember that a language may contain strong/weak and static/dynamic data types.

Dynamic data type

Code:

$myNumber = 30;           
$name = "LearnShareIT";   
$PI = 3.1415;
         
function add($a, $b) {
  	return $a + $b;
}

We can see from the preceding illustration that PHP variables are not explicitly informed of their data type. What means does it know? The compiler makes its own inferences based on the value it is assigned. Because 30 is an integer, it can correctly deduce that $myNumber is a number.

What about the roles? It also deduces itself from the value that is given to it. This indicates that add() function can either take two floats and return a foot or two integers and return one. The type can even change at runtime and interpolate itself.

Set and access state using a dynamic key in React

Use rest operator with [ ]

Maybe you want to save an object to the state. In this way, we will do this. With the value of the name attribute, we replace the key. With the value of the value attribute, we replace the value. Take a look at the code below.

Code:

import React, { useState } from "react";
 
export default function App() {
    const [state, setState] = useState({});

    const handleOnclick = (event) => {
      	setState({ ...state, [event.target.name]: event.target.value });
    };

    return (
        <div>
            <div>{JSON.stringify(state)}</div>
            <button 
              name="Code Learning Web" 
              value={"LearnShareIT"} 
              onClick={handleOnclick}
            >
              	Render
            </button>
        </div>
    );
}

When we press the ‘Render’ button, the program will reset the state to the old and new values, a new key-value pair we get from the button’s values.

Define the new object

Similar to the above method, we will also take the name and value of the button to make a key-value pair for the state. But in this method, we will define a new object and replace the values ​​in it.

Code:

import React, { useState } from "react";
 
export default function App() {
    const [state, setState] = useState({});

    const handleOnclick = (event) => {
        var key = event.target.name;
        var value = event.target.value;
        var object = {};
        object[key] = value;
        setState(object);
    };

    return (
        <div>
            <div>{JSON.stringify(state, null, 4)}</div>
            <button
              name="Code Learning Web"
              value={"LearnShareIT"}
              onClick={handleOnclick}
            >
            	Render
            </button>
        </div>
    );
}

As you can see, after having a new object containing the value of key and value ​​we need to find, the state will be replaced with this object by the setState method. I hope these methods are helpful to you.

Summary

To summarize, there are many ways to set and access state using a dynamic key in React. In this article, we will only mention two methods: Use the rest operator with the [ ] and define the new object. Let’s try them to get your desired results!

Maybe you are interested:

• How to Map through an Object in React
• How to set Text color in React
• Submit a form using the Enter key in React.js

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs