Как обновить массив в состоянии и показать обновленный массив с map () в реагировать

Question

я создаю состояние и создаю в нем массив. Мне удалось вставить массив и отобразить их, но я не могу показать обновленный массив на мой взгляд, как я могу обновить состояние, прежде чем что-либо показывать
мой код:

class App extends Component{
    constructor(){
        super()
       this.state = [
           {id:'1'  , title : ''},
           {id:'2'  , title : ''},
           {id:'3'  , title : ''}
       ]


    }

    increment = (a) =>{
        this.state.push({id : ReactDOM.findDOMNode(this.refs.id).value , title : ReactDOM.findDOMNode(this.refs.user).value})
    }




    render(){
        return(
            <div>
                 <input type="text" ref='id' placeholder='id'/>
                <input type="text" ref='user' placeholder='user'/>
                <button onClick={this.increment}>+</button>
                <ul>{ 
                    this.state.map((item , id) => 
                    <li key={id}>
                    <h1>{item.title}</h1>
                    </li>)
                        }
                </ul>
            </div>
        )
    }
        }

Answer 1

class App extends Component {
  constructor() {
    super();
    this.state = {
      todos: [
        { id: "1", title: "title 1" },
        { id: "2", title: "title 2" },
        { id: "3", title: " title 3" }
      ]
    };
  }

  increment = a => {
    const id = ReactDOM.findDOMNode(this.refs.id).value;
    const title = ReactDOM.findDOMNode(this.refs.user).value;
    this.setState(state => {
      state.todos.push({ id, title });
      return { todos: state.todos };
    });
  };

  render() {
    const { todos } = this.state;
    console.log(todos);
    return (
      <div>
        <input type="text" ref="id" placeholder="id" />
        <input type="text" ref="user" placeholder="user" />
        <button onClick={() => this.increment()}>+</button>
        <ul>
          {todos.map((item, id) => (
            <li key={id}>
              <h1>{item.title}</h1>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

вы должны использовать для передачи значения в массив.

 this.setState(state => {
      state.todos.push({ id, title });
      return { todos: state.todos };
    });

рабочие примеры вы можете увидеть здесь https://codesandbox.io/s/prod-wood-jj8rd