Skip to main content
2 de 3
adicionando o dados que vem do firestore

Organizar tabela com reactjs e firebase

estruturei uma coleção chamada equipes no firestore da seguinte forma:

inserir a descrição da imagem aqui

Estou recebendo esses dados com o ReactJS e o meu problema é que quero organizar esses dados na tabela da seguinte forma:

inserir a descrição da imagem aqui

Mas não estou conseguindo fazer. E esse é o resultado que conseguir:

inserir a descrição da imagem aqui

Sei que é um problema relativamente simples e ficaria grato se alguém pudesse ajudar. Abaixo está meu código.

const [users, setUsers] = useState([])

useEffect(() => {
    const db = firebase.firestore()

    db.collection('equipes').onSnapshot(data => {
        setUsers(data.docs.map(doc => ({ ...doc.data() })))
    })
}, [])

if (users) {
    return (
        <div>
            <table>
                <thead>
                    <tr>
                        <th rowSpan="2">#</th>
                        <th rowSpan="2">Nome</th>
                        <th colSpan="2">Furia</th>
                        <th colSpan="2">Incriveis</th>
                    </tr>

                    <tr>
                        <td>Ataques</td>
                        <td>Defesas</td>
                        <td>Ataques</td>
                        <td>Defesas</td>
                    </tr>
                </thead>
                <tbody>
                    {users.map((user, index) => (
                        <Fragment key={index}>
                            {user.players.map((u, index) => (
                                <tr key={index}>
                                    <td>{index + 1}</td>
                                    <td>{u.name}</td>
                                    <td>{u.attack}</td>
                                    <td>{u.defense}</td>
                                </tr>
                            ))}
                        </Fragment>
                    ))}
                </tbody>
            </table>
        </div>
    )
}

Dados que vem do firestore:


[
   {
      "name": "Furia",
      "players": [
         { "name": "Eduardo", "attack": 18, "defense": 2 },
         { "name": "Tiago", "attack": 15, "defense": 3 },
         { "name": "Julia", "attack": 10, "defense": 0 }
      ]
   },
   {
      "name": "Incriveis",
      "players": [
         { "name": "Eduardo", "attack": 11, "defense": 4 },
         { "name": "Tiago", "attack": 17, "defense": 0 },
         { "name": "13", "attack": 13, "defense": 6 }
      ]
   }
]