Lord Salforis Lord Salforis - 3 months ago 20
React JSX Question

React table with django namedtuple returns .map is not a function

I want to make a table of with django

namedtuple
but getting an error. Headers(which is list) works fine though.

views.py
:

info = [Info(id=5, location_id=861, f=None),Info(id=3, location_id=650, f=None)]
return render('index.html', {'info': info})


index.html


var headers = ['id', 'location', 'f']

var Table = React.createClass({
render: function() {
return (
<table className="table-hover">
{this.props.headers.map(function(name, index) {
return <th key={ index }>{name}</th>;
})};
{this.props.tableContent.map(function(row, index) {
<tr key={index}>
return(
{row.map(function(col, i) {
<td key={i}>{col}</td>
})}
);
</tr>
})};
</table>
)
}
});

ReactDOM.render(
<Table headers={headers} tableContent={info}/>,
document.getElementById('content')
);


I can't see any output and the console says:
Uncaught TypeError: this.props.tableContent.map is not a function
.

Answer

I forgot to put safe when receiving the data. To someone who might encounter this problem too. Please refer to this question too