How to use data from 2 different apis in the React table

0

I'm like a problem in my code, I want to put the name next to the title and comment of the person ... This data comes from 2 different apis of the jsonplaceholder. So in tbody I have 2 this.state.users.map and this.state.posts.map wanted to put the same data as the first map ...

import React, { Component } from "react";
import {pegaComentarios} from "../../services/comentarios";
import {listaUsuarios} from "../../services/participantes";

class Comentarios extends Component{
constructor(){
    super()
    this.state = {
        posts:[],
        users : []
    };
}
componentDidMount(){
    pegaComentarios().then(dados => this.setState({posts:dados}));
    listaUsuarios().then(usuarios => this.setState({users:usuarios}));
}

render(){
    return(
        <div>
            <div className="row">
                <div className="col">
                    <div className="card mt-2">
                        <div className="card-header">
                            <h2 className="text-center"> Comentarios</h2>
                        </div>
                        <table className="table">
                            <thead>
                                <tr>
                                    <th >Nome</th>
                                    <th >Titulo</th>
                                    <th >Comentário</th>
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    this.state.users.map((item) => {
                                        return (
                                            <tr key = {item.id} >
                                                <td>{item.name}</td>
                                            </tr>                                              
                                        )
                                    })
                                    this.state.posts.map((comm) => {
                                        return(
                                            <tr>
                                                <td>{comm.title}</td>
                                                <td>{comm.body}</td>
                                            </tr>
                                        )
                                    })
                                }
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    )
  }
}export default Comentarios;
    
asked by anonymous 20.12.2018 / 19:40

0 answers