How to add an object in an array of objects? ReactJS?

Question

My Project is, an array of objects where i get only the names and render on screen of form 3 in 3, with button next and previous change the names, and can to filter for letters.

I would want add a new value, typped on input and clicked in the button add.

My code button:

addItem = () => {
  const inValue = {
    id: 0,
    name: this.state.input
  }
  this.setState({
    filtered: this.state.filtered.concat(inValue),
    currentPage: 0
  })
}

I would want the value inserted in the filtered array.

My code all:

import React, { Component } from 'react';

class App extends Component {
  constructor() {
    super();

    const peoples =[{id:0, name:"Jean"}, 
      {id:1, name:"Jaha"}, 
      {id:2, name:"Rido"}, 
      {id:3, name:"Ja"}, 
      {id:4, name:"Letia"}, 
      {id:5, name:"Di"}, 
      {id:6, name:"Dane"}, 
      {id:7, name:"Tamy"}, 
      {id:8, name:"Tass"},
      {id:9, name:"Ts"}, 
      {id:10, name:"Abu"}, 
      {id:11, name:"Ab"}];
    
    this.state = {
      elementsPerPage:3,
      currentPage:0,
      peoples,
      input: "",
      filtered: peoples,
      teste: '',
    };


  } 
  
getValueInput = (evt) => {
  const inputValue = evt.target.value;
  this.setState({ input: inputValue });
  this.filterNames(inputValue);
}

filterNames = (inputValue)=> {
  const { peoples } = this.state;
  this.setState({
    filtered: peoples.filter(item => 
       item.name.includes(inputValue)),
    currentPage:0
  });
  const Oi = this.state.filtered.map(item=>item.name);
if(Oi.length<=0){
  alert('Você está adicionando um nome')
}
    console.log(Oi)
  }

  
  elementsOnScreen = () => {
    const {elementsPerPage, currentPage, filtered} = this.state;
    return filtered
      .map((item) => <li key={item.id}> {item.name} <button onClick={() => this.remove(item.name)}> Delete </button> </li>)
      .slice(currentPage*elementsPerPage, currentPage*elementsPerPage + elementsPerPage);
    
    if(this.state.filtered.length < 1){
      this.setState({currentPage: this.state.currentPage - 1})
    }
   
  }

  remove = (id) => {
  console.log(this.state.filtered.length)
    if(this.state.filtered.length < 0){
       this.setState({currentPange: this.state.currenPage - 1})
    }
  this.setState({filtered: this.state.filtered.filter(item => item.name !== id) })
}
  
 nextPage = () => {
         console.log(this.state.filtered)

    const {elementsPerPage, currentPage, filtered} = this.state;
    
    if ((currentPage+1) * elementsPerPage < filtered.length){
      this.setState({ currentPage: this.state.currentPage + 1 });
    }
  }
  
    previousPage = () => {
      const { currentPage } = this.state;
      if(currentPage - 1 >= 0){
         this.setState({ currentPage: this.state.currentPage - 1 });
      }
  }
    addItem = () =>{
        const inValue = {id:0 ,name: this.state.input}
        this.setState({filtered: this.state.filtered.concat(inValue), currentPage: 0})
      }
    

  render() {
    return (
      <div>
        <button onClick={this.addItem}> Add </button>
        <input type="text" onChange={ this.getValueInput }></input>
        <button onClick={this.previousPage}> Previous </button>
        <button onClick={this.nextPage}> Next </button>
        <h3>Current Page: {this.state.currentPage}</h3>
        <ul>Names: {this.elementsOnScreen()}</ul>
      </div>
    );
  }
}

export default App;

Answer 1

You would have the array of objects contained within your state, then use setState

this.state = {
      elementsPerPage:3,
      currentPage:0,
      peoples,
      input: "",
      filtered: peoples,
      teste: '',
      peoples: [
  {id:0, name:"Jean"}, 
  {id:1, name:"Jaha"}, 
  {id:2, name:"Rido"}, 
  {id:3, name:"Ja"}, 
  {id:4, name:"Letia"}, 
  {id:5, name:"Di"}, 
  {id:6, name:"Dane"}, 
  {id:7, name:"Tamy"}, 
  {id:8, name:"Tass"},
  {id:9, name:"Ts"}, 
  {id:10, name:"Abu"}, 
  {id:11, name:"Ab"}];
    };

To update the peoples array, you would first need to create a copy of the peoples array, modify the copy, then use setState to update.

let { peoples } = this.state;
peoples.push({ id:12, name:"Jean"}) 
this.setState({peoples: peoples})

Answer 2

Looks like you are already updating your state with the typed input.

So in your add button you can get the state value and push it to your people array. Something like this:

addItem = () => {
  const { inputValue, people } = this.state;
  if (!inputValue) return; // check if inputValue has any value
  people.push({ id: people.length+1, name: inputValue )} // I don't recommend using sequencial ids like this, you'd better have a handler to generate it for you
  this.setState({ people, inputValue: '' }); // update people and clear input
}

Hope it helps