Adding values to a map state object one at a time

Active3 hr before
Viewed126 times

9 Answers


How to add data in the map one by one,Below will be my thoughts on your questions.,How to add data in the map one by one.

** React detect reference change in state to refresh the component. Assuming you need to update state in button click, below is the click function.

function buttonClick() {
   const temp = new Map(imgSrcs);
   temp.set('newKey', 'newValue');
      imgSrcs: temp

In order to update the array in the state object, a new array object must be supplied to the input key using the setState method:,This guide explains the steps to modify the state of a component using an array.,Note: In the above example, the list is updated as soon as you start typing because onChange updates the state that re-renders the App component.

1import React, { Component } from "react";
2import "./style.css";
4export default class App extends Component {
5  state = {
6    cart: ["Corn", "Potato"],
7  };
9  saveInput = (e) => {
10    this.setState({ input: });
11  };
13  addNewItem = () => {
14    let { cart, input } = this.state;
15    cart.push(input);
16    // this.state.cart.push(this.state.input); // same as above, though bad practice 
17  };
19  render() {
20    return (
21      <div>
22        <input
23          type="text"
24          onChange={this.saveInput}
25        />
26        <button onClick={this.addNewItem}> Add Item </button>
27        <ol>
28          {, sIndex) => {
29            return <li key={sIndex}> {subItems}</li>
30          })}
31        </ol>
32      </div>
33    );
34  }
load more v

The MaxConcurrencyfield’s value is an integer that provides an upper bound on how many invocations of the Iterator may run in parallel. For instance, a MaxConcurrency value of 10 will limit your Map state to 10 concurrent iterations running at one time. ,A MaxConcurrency value of 1 invokes the Iterator once for each array element in the order of their appearance in the input, and will not start a new iteration until the previous has completed. ,For an introduction to using a Map state, see the Map State Tutorial.

 Pretag team - issue, fix, solve, resolve

You can add values to a map with the set() method. The first argument will be the key, and the second argument will be the value.,The values() method returns the values:,As an example, initialize an object with a numerical key and compare the value for a numerical 1 key and a stringified "1" key:

 Pretag team - issue, fix, solve, resolve

The value of the element to add to the Map object.,The key of the element to add to the Map object., The set() method adds or updates an element with a specified key and a value to a Map object.

set(key, value)
load more v

It receives the entire store state, and should return an object of data this component needs.,It is called every time the store state changes.,Your mapStateToProps function should return a plain object that contains the data the component needs:

function mapStateToProps(state, ownProps ? )
load more v

To add value to a Map, use the set(key, value) method.,In JavaScript, objects are used to store multiple values as a complex data structure.,To get a value from a Map, use the get(key) method:

 Pretag team - issue, fix, solve, resolve

In the above picture, we have our to-do list defined as a key pointing to an array of to-do task objects within the state object. Each task object has the key, “completed” pointing to a boolean value, indicating whether or not we have completed an individual task.,Let’s say we want to build out a to-do list application. Within our App.js file, we could define our state like the following:,In the above example, we are passing in the ID of an individual task to the method we defined, completeTask. In doing so, we can reference an individual task within the state object.

Let’s say we have an array that contains different numbers:

const arr = [2, 3, 4, 5]
load more v

Suppose you want to know all the keys common to two Map objects.,Suppose you want to remove from one Map all of the keys that have mappings in another.,Along similar lines, suppose you want to know whether two Map objects contain mappings for all of the same keys.

// Group employees by department
Map<Department, List<Employee>> byDept =
load more v

Other "object-state" queries related to "Adding values to a map state object one at a time"