Why do I receive "user" as indefined?

Question

I am receiving user as Indefined but I don’t understand the reason. Can help me?

import React from 'react';

class Main extends React.Component {

    state = {
       listaMensagens: [
            {
                usuario: "",
                mensagem: ""
            }
        ]
            
    }
    
    adicionaMensagem = (newUser, newMessage) =>{
        
        const novaLista = this.state.listaMensagens
        novaLista.push(newUser, newMessage)
       

        this.setState({
            listaMensagens: novaLista
        })

    }

    onChangeUsuario = (event) => {
        this.setState({usuario: event.target.value})
    }

    onChangeMensagem = (event) => {
        this.setState({mensagem: event.target.value})
    }

  

  render(){
    const listaRenderizada = this.state.listaMensagens.map((user)=>{

        return <div>
            <p>{user.usuario}</p>
            <p>{user.mensagem}</p>
            
        </div>
    
    })
    

    return (
      <div>

        <p>{listaRenderizada}</p>
   

        <input nome={"usuario"} onChange={this.onChangeUsuario} placeholder={"Usuário"} value={this.state.usuario}></input>
        <input nome={"mensagem"} onChange={this.onChangeMensagem} placeholder={"Mensagem"} value={this.state.mensagem}></input>
        <button onClick={this.adicionaMensagem} type={"submit"}>Enviar</button>
       
  
  
      </div>
    );
  }
}

export default Main;

Answer 1

No two properties were set in the component state usuario and mensagem and for that reason this.state.usuario and this.state.mensagem do not exist and therefore the message undefined, that is, not defined, the right state to be created:

this.state = {
    usuario: "",
    mensagem: "",
    listaMensagens: [
      {
        usuario: "a",
        mensagem: "b"
      }
    ]            
}

the correct example with some code changes:

class Main extends React.Component {
    constructor() {
       super();
       this.state = {
          usuario: "",
          mensagem: "",
          listaMensagens: [
            {
                usuario: "a",
                mensagem: "b"
            }
         ]            
       }
    }
    adicionaMensagem = () => {        
        const {usuario, mensagem} = this.state;
        this.setState({
            usuario: '',
            mensagem: '',
            listaMensagens: [
              ...this.state.listaMensagens,
              {usuario, mensagem}
            ]
        });
    }

    onChangeUsuario = (event) => {
        this.setState({usuario: event.target.value})
    }

    onChangeMensagem = (event) => {
        this.setState({mensagem: event.target.value})
    } 

    render() {       
       return (
          <div>
              <div>{this.state.listaMensagens.map((user) => 
              <div><div>{user.usuario} - {user.mensagem}</div></div>)}</div>
              <input nome="usuario" onChange={this.onChangeUsuario} placeholder={"Usuário"} value={this.state.usuario}></input>
              <input nome="mensagem" onChange={this.onChangeMensagem} placeholder={"Mensagem"} value={this.state.mensagem}></input>
              <button onClick={this.adicionaMensagem} type="button">Enviar</button>
         </div>
       );
   }
}

ReactDOM.render( <Main/> , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>