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>
</>
)
}