No rows rendered, no errors detected - reactjs

Question

In my React component, trying to generate rows from the state. State object is being populated, but no rows is being rendered:
class DataTable extends React.Component {
constructor(props) {
super(props);
this.renderTableData = this.renderTableData.bind(this);
this.fetchData = this.fetchData.bind(this);
this.state = {
Houses: []
};
}
componentDidMount() {
this.fetchData();
}
renderTableData() {
return( this.state.Houses.map((house, index) => {
<tr key={index}>
<td>{house.Id}</td>
<td>{house.Country}</td>
<td>{house.Address}</td>
<td>{house.Description}</td>
<td>{house.Photo}</td>
<td>{house.Price}</td>
</tr>
}))
}
fetchData = () => {
fetch('./AllHouses')
.then(rsp => rsp.json())
.then(allHouses => {
this.setState({ Houses: allHouses });
}).catch(
function (error) { console.log(error.message); }
);
console.log(this.state.Houses);
}
render() {
return (
<table>
<thead>
<tr>
<th>ID</th>
<th>Country</th>
<th>Address</th>
<th>Description</th>
<th>Photo</th>
<th>Price</th>
</tr>
</thead>
<tbody>
**{this.renderTableData() }**
</tbody>
</table>
);
}
}
ReactDOM.render(<DataTable />, document.getElementById('content'));

Answer 1

add return before <tr key={index}> OR wrap the tr with () instead of {}.
renderTableData() {
return this.state.Houses.map((house, index) => {
return <tr key={index}>
<td>{house.Id}</td>
<td>{house.Country}</td>
<td>{house.Address}</td>
<td>{house.Description}</td>
<td>{house.Photo}</td>
<td>{house.Price}</td>
</tr>
})
}

Answer 2

you could use the bind function but I recommend you use arrow functions directly.
You could call the array state.Houses on the jsx directly executing the map if you want, and then call the function renderTableData just like this:
import React, { Component } from 'react';
class StackOverflow extends Component {
state = {
Houses: [],
};
componentDidMount() {
// Data example
this.setState({
Houses: [
{
id: 1,
Country: 'Country 1',
Address: 'address 1',
Description: 'Description 1',
Photo: 'Photo 1',
Price: 'Price 1',
},
{
id: 2,
Country: 'Country 2',
Address: 'address 2',
Description: 'Description 2',
Photo: 'Photo 2',
Price: 'Price 2',
},
{
id: 3,
Country: 'Country 3',
Address: 'address 3',
Description: 'Description 3',
Photo: 'Photo 3',
Price: 'Price 3',
},
],
});
}
renderTableData(house, index) {
return (
<tr key={index}>
<td>{house.id}</td>
<td>{house.Country}</td>
<td>{house.Address}</td>
<td>{house.Description}</td>
<td>{house.Photo}</td>
<td>{house.Price}</td>
</tr>
);
}
render() {
return (
<table>
<thead>
<tr>
<th>ID</th>
<th>Country</th>
<th>Address</th>
<th>Description</th>
<th>Photo</th>
<th>Price</th>
</tr>
</thead>
<tbody>
{this.state.Houses.map((house, index) =>
this.renderTableData(house, index)
)}
</tbody>
</table>
);
}
}
export default StackOverflow;
it's much better organized because only you have HTML code in the renderTableData, after if you want you can export that <tr .... /tr> on a different component and call it on that function.
It's going to be cleaner and reusable your code.
Regards