How to add values to Array using map in React

Question

I have the following Array

arrayOfItems: [{
0:  
    description: "item1"
    id: 11
    name: "item1Name"   
},
1:  
    description: "item2"
    id: 12
    name: "item2Name"   
},
2:  
    description: "item3"
    id: 13
    name: "item3Name"   
},
3:  
    description: "item4"
    id: 14
    name: "item4Name"   
}]

I want to add a new pair

{   
    description: "item5"
    id: 15
    name: "item5Name"   
}

I am still very new to React and have been working on this problem. I do understand how Map works but not sure how I can add new pair in React

This component is a dropdown list so there is no input or button click related to it.

{dataArray.arrayOfItems!.map((item: any) => {
return (
  <ComponentName key={item.id} value={item.description}>
    {item.description}
  </ComponentName>
);
})}

set array in state , on button click event , get value of input and push to array — Saurabh Mistry
– Saurabh Mistry, Commented Jun 14, 2019 at 15:16
@SaurabhMistry, there is not button click. This is a dropdown list. Sorry I should have mentioned that — Maddy
– Maddy, Commented Jun 14, 2019 at 15:17

Saurabh Mistry · Accepted Answer · 2019-06-14 15:26:37Z

2

if you want to add item to array on page load use componentDidMount() method:

class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items:[
       {id:1,name:'aaa', description:'this is description aaa'},
       {id:2,name:'bbb', description:'this is description bbb'},
      ]
    }
  }

  componentDidMount(){
       let items=this.state.items;
       let newItem={id:5,name:'ccc',description:'this is description ccc'};
       let updatedItems=items.push(newItem);
        // or you can use ... spread operator
       // let updatedItems=[...items,newItem];
       this.setState({items:updatedItems});
  }


}

answered Jun 14, 2019 at 15:26

Saurabh Mistry

13.8k5 gold badges60 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ahmed Kamal · Accepted Answer · 2022-02-05 00:16:58Z

1

You can store your array into state, and then modify the state.

Here's an example

function MyComponent() {
  const [items, setItems] = React.useState([{ id: 0, description: 'Old Item' }])

  const loadMoreItems = () => {
    setItems([...items, { id: 1, description: 'New Item' }])
  }

  return (
    <>
      {items.map((item) => (
        <div key={item.id} value={item.description}>
          <p>{item.description}</p>
        </div>
      ))}
      <button onClick={loadMoreItems}>Load more items</button>
    </>
  )
}

edited Feb 5, 2022 at 0:16

answered Jun 14, 2019 at 15:33

Ahmed Kamal

3,0404 gold badges25 silver badges39 bronze badges

Comments

Junius L · Accepted Answer · 2019-06-14 15:26:56Z

0

Add on change event to your dropdown.

onChange = (event) => {
  console.log(event.target.value)
  // add your value to array here
  this.setState((prevState) => {
    arrayOfItems: [...prevState.arrayOfItems, yourItem],
  })
}

<select onChange={this.onChange}>
</select>

EDIT

Adding values on page load. Don't use push to add items to array in state.

componentDidMount = () => {
  this.setState((prevState) => {
    arrayOfItems: [...prevState.arrayOfItems, yourItem],
  })
}

edited Jun 14, 2019 at 15:26

answered Jun 14, 2019 at 15:21

Junius L

16.2k6 gold badges61 silver badges105 bronze badges

1 Comment

Junius L Over a year ago

never use push to change array in state, daveceddia.com/why-not-modify-react-state-directly

Nimantha · Accepted Answer · 2022-02-05 05:05:09Z

0

let fileInfos=this.state.fileInfos;

fileInfos.push({
                  "name": file.name,
                  "content": e.target.result
                  });

    this.setState({fileInfos});

edited Feb 5, 2022 at 5:05

Nimantha

6,5276 gold badges32 silver badges78 bronze badges

answered Feb 4, 2022 at 9:50

AYUSH CHAUDHARY

557 bronze badges

1 Comment

Maddy Over a year ago

this is equivalent to the spread operator

Collectives™ on Stack Overflow

How to add values to Array using map in React

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related