estou com um problema para acessar informações de um array que tem um objeto dentro, usando React.
Essa é a função que trás meu json e altera o estado da aplicação, ele cria um times.nome, times.players e times.foto, no caso isso vai virar um array de objetos
getTimes () {
ajax().get(`./src/json/times.json`)
.then(result => {
this.setState({
times: result.map((time) => ({
nome: time.time,
players: time.player,
fotos: time.foto
}))
})
})
}
Aqui eu passo ele para meu app-content
render() {
return <AppContent
times={this.state.times}
/>
}
Nele, eu renderizo meu componente
<TimeCasa times= {times} />
Até aqui tudo certo, porém lá no meu componente
const TimeCasa = ({times}) => {
let pos = times[0]
console.log(pos)
return (
<div className='wrapper-casa'>
<h1 className="time">{pos.nome}</h1>
o times[0] encontra o objeto normalmente e eu atribui ele a variavel pos, dentro dessa variavel eu chamei o pos.nome e ele da erro dizendo que não é possivel acessar nome de undefined, sendo que pos não é undefined, ele é um objeto que contem a key nome. Alguém sabe o que pode ser?
console.log(pos)
?{pos && pos.nome}
dentro do h1, vê se vai