React Tips

react_tips.js

// React: how to update state.item[1] in state using setState?
this.setState(({items}) => ({
    items: [
        ...items.slice(0,1),
        {
            ...items[1],
            name: 'newName',
        },
        ...items.slice(2)
    ]
}));

// Removing element from array in component state
removeItem(index) {
  this.setState({
    data: this.state.data.filter((_, i) => i !== index)
  });
}

// React - Implementing maxlength of 6 for input type number
<input type="number" onInput={(e) => {
  e.target.value = Math.max(0, parseInt(e.target.value, 10)).toString().slice(0, 6)// maxLength 6 for number
}} />

// React - setState
handleChange = (event) => {
    const { target: { name, value } } = event
    this.setState({ [name]: value })
}