0

Olá, estou inciando os estudos em React e ao tentar criar um código que gerasse componentes(neste caso o "Box")em que ao clicar de um botão passando objetos vindos de um state até um props, partido de um formulário, sempre dá erro de valor undefined:

ERRO:

O erro ocorre ao tentar compilar o seguinte código:


 const [name, setName] = useState('')
 const [email, setEmail] = useState('')
 const [salario, setSalario] = useState('')

 const [ box,setBox] = useState([{nome:"name", mail:"email", sal:"salario"}])
 
 function handleGenerate(){

   setBox([...box, {name, email, salario} ])
   
   setName('');
   setEmail('');
   setSalario('');
 
   const handleChangeName= (event)=>{setName(event.target.value)}
   const handleChangeEmail= (event)=>{setEmail(event.target.value)}
   const handleChangeSalario= (event)=>{setSalario(event.target.value)}

 return(
   <React.Fragment>

     <input type="text" placeholder="Nome" value ={name} onChange={text => handleChangeName(text)}/><br/>
     <input type="text" placeholder="email" value ={email} onChange={text => handleChangeEmail(text)} /><br/>
     <input type="text" placeholder="salario" value ={salario} onChange={text => handleChangeSalario(text)} /><br/>

     <button onClick={handleGenerate}>Gerar box</button>

     {box.map((box, index)=>{
         
         return <Box key={index} index={index} name = {box[index].nome} email ={box[index].mail} salario ={box[index].sal}/>
     })
     }
   </React.Fragment>
   )
}

function Box(props){
 return(
 <div id="box">
   
   <h2>Funcionario</h2>
   <h3>nome = {props.name}</h3>
   <h3>email = {props.email}</h3>
   <h3>salario = {props.salario}</h3>
   <h3>index = {props.index} </h3>
   
 </div>
 )
}

É importante ressaltar que cada Box tem que vir de acordo com os itens que foram colocados nos inputs no instante em que clico no botão.

Obrigado desde já e desculpe qualquer erro :)

4
  • 1
    Remova todos os [index] deste trecho: return <Box key={index} index={index} name = {box[index].nome} email ={box[index].mail} salario ={box[index].sal}/>
    – bfavaretto
    Commented 15/04/2021 às 15:40
  • Mas quando eu tiro os index nenhum valor é passado para o Box (só undefined) Commented 15/04/2021 às 16:29
  • Foi assim que você deixou? return <Box key={index} index={index} name = {box.nome} email ={box.mail} salario ={box.sal}/>?
    – bfavaretto
    Commented 15/04/2021 às 17:04
  • sim. Eu até ja havia testado assim antes, mas acontece como eu falei Commented 15/04/2021 às 21:14

2 Respostas 2

0

Acredito que esta usando a funcao map incorretamente. O primeiro parâmetro ja retorna o valor do item dentro do array.

{box.map((itemDeBox, index)=>{
   return <Box key={index} index={index} 
          name = {itemDeBox.nome} 
          email ={itemDeBox.mail} 
          salario ={itemDeBox.sal}/>
 })`

Por isso que da o erro de nome não existe dentro de um valor não definido.

3
  • Então, quando eu utilizo dessa forma é passado um undefined para o código e mantém o mesmo problema. Eu percebi que ele estava tentando pegar uma informação depois "da ultima" o que causava o erro, o que eu fiz foi tentar retardar em 1 array esse .map e ai funcionou (porém não sei se seria classificado como gambiarra, gostaria que olhasse a resposta que fiz e respondesse se é uma opção viavel, ou algo complexamente ruim). Obrigado pela resposta! Commented 17/04/2021 às 3:29
  • E gabiarra sim. Em algum ponto voce esta colocando valores errados dentro do array box. Map () vai iterar por todos item que voce colocou dentro, incluindo valores inválidos. Acredito que pode ser essa linha setBox([...box, {name, email, salario} ]). Deveria ser setBox([...box, {nome:name, mail:email, sal:salario} ]). Também não tem necessidade de definir valores assim box[index].nome dentro da funcao map, deveria ser item.nome.
    – Hozeis
    Commented 19/04/2021 às 12:54
  • Foi isso o erro. Se sim, seleciona isso como resposta.
    – Hozeis
    Commented 24/04/2021 às 23:59
0

Ao tentar solucionar o problema percebi que o map estava tentando pegar um objeto que ainda não existia, para isso, tentei fazer ele pegar antes, utilizando var === ? : (operador ternário) para que ele não pegasse o index 0(que supostamente estava dando conflito).

Note que também criei uma variável(Essa Liberation -> que é liberada quando eu clico no botão) de controle para que não aparecesse uma primeira cadeia de valores sem nada na tela(como esconde-la)

Assim resolvi da seguinte forma:

{
         
        liberation === true? box.map((item, index)=>{
             return (index === 0?
                      undefined:
                      <Box key={index} 
                           index={index} 
                           name = {box[index].name} 
                           email ={box[index].email} 
                           salario ={box[index].salario}
                       />)
        }): undefined          
      }

quando eu clico no botão (pela primeira vez) a liberation libera a para que possa aparecer na tela o componente BOX:

const [liberation, setLiberation] = useState(false) //liberação para aparecer na tela os itens

function handleGenerate(){

 setBox([...box, {name, email, salario} ])
 setLiberation(true);
 
 setName('');
 setEmail('');
 setSalario('');
}

Para mim funcionou, não sei se isso poderia ser considerado uma gambiarra. Como estou começando, provavelmente deve existir outras formas mais normais de se fazer isso kk, sem precisar utilizar dois operadores ternários para desviar um único problema.

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 .