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;