0

Eu tenho um componente MotoboyPage, onde nele eu criei um protótipo do que eu quero, pra ficar mais fácil inicialmente. Então creio que ficou fácil de ler, cheguei a um erro, onde minha função getListOfMotoboys, que renderiza o conteudo usando .map, esta renderizando na tela [object Object], não sei porque isso esta acontecendo, o esperado era renderizar o retorno da função renderListOfMotoboys.

MotoboyPage.jsx

import { useState } from 'react'
import { Motoboy } from '../../components/Motoboy'

export const MotoboyPage = () => {
  const [name, setName] = useState('')
  const [age, setAge] = useState(0)

  const [motoboys, setMotoboys] = useState([{name: 'sacoludo', age: 2}])

  
  const getListOfMotoboys = () => {
    let list = motoboys.map((motoboy, index) => <Motoboy key={index} _name={motoboy.name} _age={motoboy.age} /> )
    return (
      <div>
        <h1>motoboys</h1>
        <div>{list}</div>
      </div>
    )
  }
  
  const renderListOfMotoboys = () => {
    const listDiv = document.getElementById('list');
    const content = getListOfMotoboys();
    console.log(content)
    listDiv.innerHTML = content;
  }
  
  const handleSubmit = (e) => {
    e.preventDefault()

    setMotoboys([{ name: name, age: age }, ...motoboys])
    renderListOfMotoboys();
  }
  
  return (
    <>
      <form onSubmit={handleSubmit}>
        <input
          type='text'
          placeholder='name'
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <input
          type='number'
          name='age'
          id='age'
          value={age}
          onChange={(e) => setAge(e.target.value)}
        />

        <button type='submit'>criar novo motoboy</button>
      </form>
      <div id='list'></div>
    </>
  )
}

error

1
  • Não tenho certeza pq estou vendo do cel, mas talvez seja pq você na hora de criar a lista em setMotoboy, no handle, você está criando um obj ao invés de criar uma array, tenta aí. Commented 21/04/2022 às 2:47

1 Resposta 1

0

A sua função renderListOfMotoboys está alterando o DOM diretamente, o que a gente deixa pro React cuidar pra gente, você não precisa fazer isso na maioria dos casos.

O conceito do React é ser declarativo, você declara o que você quer que ele faz e ele faz. Por exemplo, você não precisa ter <div id="list"></div> pra depois imperativamente colocar as coisas dentro dessa div, você pode simplesmente fazer:

<div>
  <h1>motoboys</h1>
  <div>
  {
    motoboys.map((motoboy, index) => <Motoboy key={index} _name={motoboy.name} _age={motoboy.age} />)
  }
  </div>
</div>

Com essa mudança você não precisa mais de getListOfMotoboys e renderListOfMotoboys.

De uma olhada na documentação oficial aqui

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 .