0
267
Viewshow to print an array from an object in react?
const api = axios.create({
baseURL: 'https://iotserver-arha83.herokuapp.com/api/customers/'
})
class App extends Component {
state = {
courses:[]
}
constructor(){
super();
api.get('/').then(res =>{
this.setState({courses: res.data})
})
}
render(){return (
<div className="App">
<header className="App-header">
<table>
<tr><td>pk</td>{this.state.courses.map(course=><td>{course.pk}</td>)}</tr>
<tr><td>title</td>{this.state.courses.map(course=><td>{course.title}</td>)}</tr>
<tr><td>gateway</td>{this.state.courses.map(course=><td>{course.gateway}</td>)}</tr>
</table>
</header>
</div>
);}
}
export default App;
[
{
"pk": 1,
"title": "first",
"gateways": [1]
}, {
"pk": 2,
"title": "second",
"gateways": [2]
}, {
"pk": 5,
"title": "test",
"gateways": []
}, {
"pk": 6,
"title": "test",
"gateways": []
}
]
this is my code and I want to print every item on my website but I can't print gateways because it's an array I tried to change the gateway into string so it might be printed but didn't work any ideas...? note: this code should print every thing on the upper list
·
Juan Pablo Isaza
1 answers
Answer question0
You need to iterate over the array only once using the map() method and render a tr for each element.
<table>
<tr>
<th>pk</th>
<th>title</th>
<th>gateway</th>
</tr>
{courses.map((course) => (
<tr key={course.pk}>
<td>{course.pk}</td>
<td>{course.title}</td>
<td>{course.gateways.join(",")}</td>
</tr>
))}
</table>
Property gateways is also an array which you can map too, however since you only want to render values you can use join(",") method instead.
On a side note, it's better to start using functional components.
·
Juan Pablo Isaza
Report
Answer question