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) é:
O resumo dos componentes é : (de acordo o componente "ShowForms") nem sequer é achado
formList
?return <div>{props.list}</div>
isso não renderizada nada!formList
?console.log(this.state.formList)
?