CODEWITHSUNDEEP
reactjs
Maddy
Maddy

Reputation: 2060

How to add values to Array using map in React

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>
);
})}

Upvotes: 1

Views: 7522

Answers (4)

AYUSH CHAUDHARY
AYUSH CHAUDHARY

Reputation: 55

let fileInfos=this.state.fileInfos;

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

    this.setState({fileInfos});

Upvotes: 0

Ahmed Kamal
Ahmed Kamal

Reputation: 3000

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>
    </>
  )
}

Upvotes: 1

Junius L
Junius L

Reputation: 16122

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],
  })
}

Upvotes: 0

Saurabh Mistry
Saurabh Mistry

Reputation: 13669

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});
  }


}

Upvotes: 2

Related Questions