JSX element does not load using this.state.list.map

Question

I’m making a Forms in React and I need that after sending the form the same be rendered in a div different showing the content to the user However the component Showforms is not rendered and much less recognized, the terminal does not show me any error if you want, and all components are being properly called.

Follow the code excerpt below.

state = {
    name: '',
    tel: '',
    email: '',
    description: '',
    formList: [],
}

Function when send button is clicked

saveForm = event => {
    event.preventDefault()
    const { state: { name, tel, email, description,formList } } = this
    const regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    const emailValidation = regex.test(email)

    if ((name === '') || ((tel === '') && (tel.length < 9)) || (email === '') || (description === '')) {
        alert('Preencha todos os campos devidamente')
    } else if (!emailValidation) {
        alert('Email inválido, preencha corretamente')
    } else {
        formList.push(name, tel, email, description)
        console.log(this.state.formList)
        alert('Seu formulário foi enviado com sucesso! Nós agradeçemos seu contato!')
    }
}

Call the components to be rendered in the DOM

{/*list's information */}
<div id='descriptionConteiner'>
    {this.state.formList.map((list,index)=>{
        return <ShowForm key={`${list}-${index}`} list={list} index={index}/>
    })}
</div>

The Showform component is as follows:

import React from 'react'


const ShowForm = props => {
    return <div>{props.list}</div>  
}
export default ShowForm

The console.log(this.state.formList) is:

The summary of the components is : (according to the component "Showforms") is not even found

Answer 1

At no time in your code is the last state of the variables created in the question being stored.

Relevant points:

• this setState is the method responsible for changing the state of some variable or variables of its component in the layout written as classes, if using the new is the Hook React.useState.
• The above command was not used to change the state of this component.

---

Example:

class Form extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>{props.value}</div>
    )
  }
}

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      value:'',
      formList: []
    }
    this.add = this.add.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  add() {
    let {value, formList} = this.state;
    formList.push(value);
    value = '';
    this.setState({value, formList});
  }
  handleChange(e) {
    let state = this.state;
    state[e.target.name] = e.target.value;
    this.setState(state);
  }
  render() {
    return (
      <div>
        <div>
          <input 
            type="text" 
            name="value"
            value={this.state.value} 
            onChange={this.handleChange}
          />
          <button onClick={this.add}>Add</button>        
        </div>
        {this.state.formList.map((item, ix) => <div>{item}</div>)}
      </div>     
    )
  }
}
ReactDOM.render( <App/> , 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>