array as state in react code example
Example 1: how to add array data on state react
this.setState({ myArray: [...this.state.myArray, 'new value'] }) //simple value
this.setState({ myArray: [...this.state.myArray, ...[1,2,3] ] }) //another array
Example 2: add items to a react array in hooks
const addMessage = (newMessage) => setMessages(state => [...state, newMessage])
Example 3: react list based on state
import React, { Component } from 'react'; class App extends Component { constructor(props) { super(props); this.state = { list: [ { id: '1', age: 42 }, { id: '2', age: 33 }, { id: '3', age: 68 }, ], }; } onRemoveItem = id => { this.setState(state => { const list = state.list.filter(item => item.id !== id); return { list, }; }); }; render() { return ( <div> <ul> {this.state.list.map(item => ( <li key={item.id}> The person is {item.age} years old. <button type="button" onClick={() => this.onRemoveItem(item.id)} > Remove </button> </li> ))} </ul> </div> ); }} export default App;
Example 4: add items to a react array in hooks
const addMessage = (newMessage) => setMessages(state => [newMessage, ...state])