1

Estou fazendo um forms em React e preciso que após o envio do formulário o mesmo seja renderizado em uma div diferente mostrando o conteúdo para o usuário Porem o componente Showforms não é renderizado e muito menos reconhecido, no terminal não me aparece nenhum erro se quer, e todos os componentes estão sendo devidamente chamados.

Segue a seguir o trecho do código.

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

Função quando o botão de enviar é clicado

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!')
    }
}

Chamada do componentes para ser renderizado no DOM

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

O componente ShowForm é a seguinte:

import React from 'react'


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

O console.log(this.state.formList) é:

inserir a descrição da imagem aqui

O resumo dos componentes é : (de acordo o componente "ShowForms") nem sequer é achado

inserir a descrição da imagem aqui

9
  • Não está renderizando o que? o que tem dentro de formList? return <div>{props.list}</div> isso não renderizada nada!
    – novic
    Commented 13/10/2020 às 15:13
  • @novic exatamente o conteúdo do formList não é passado para o componente através do map. eu não sei porque =(
    – LucasRussi
    Commented 13/10/2020 às 15:14
  • o que tem dentro do formList?
    – novic
    Commented 13/10/2020 às 15:16
  • o conteudo dentro do formlist, o formlist é um array que guarda os inputs dos status (name,email,tel, description) após o salvamento através da função formlist.push. O conteudo que tem dentro do formlist são simples strings
    – LucasRussi
    Commented 13/10/2020 às 15:17
  • guardar valores? então demonstre na sua pergunta com um console.log? não estou vendo, não tem como! console.log(this.state.formList)?
    – novic
    Commented 13/10/2020 às 15:19

1 Resposta 1

1

Em nenhum momento no seu código está sendo armazenado o ultimo estado das variável criada na pergunta.

Pontos relevantes:

  • this.setState é o método responsável em mudar o estado de alguma variável ou variáveis do seu componente no layout escrito como classes, se for utilizar a nova é o Hook React.useState.
  • Não foi utilizado o comando acima para alterar o estado desse componente.

Exemplo:

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .