1

My actual Javascript code is the following:

var schoolsData = new Array();
myDB.schools
.each(function(school) {
    console.log('"' + school.title + '" wird auf den Array gepusht.');
    schoolsData.push(new Array(school.title, schools.schoolnumber, school.address, school.principal, school.email, school.creationdate, school.lastupdate, school.comment));
});
var SchoolsRender = React.createClass({
render: function() {
    return (
        <tr>
            {this.props.list.map(function(listValue){
                return <td>{listValue}</td>;
            })}
        </tr>
    )
}
});
ReactDOM.render(<SchoolsRender list={schoolsData} />, document.getElementById('schoolsDATA'));

As you can see I am trying to pull data from my local IndexedDB database (I am using dexieJS) and put it via ReactJS into a table element but nothing appears. Where is the point?

Edit: I think the problem is basically that I'm trying to output that 3D array. Is there any simple and elegant solution?

1 Answers1

0

Add another component RowRender to render single row. Modify SchoolsRender component accordingly.

var RowRender = React.createClass({
    render: function() {
        return (
            <tr>
                <td>{this.props.title}</td>
                <td>{this.props.schoolnumber}</td>
                <td>{this.props.address}</td>
                <td>{this.props.principal}</td>
            </tr>
        )
    }
});
var SchoolsRender = React.createClass({
    render: function() {
        return (
            <table>
                {this.props.list.map(function(listValue,index){
                    return <RowRender key={index} title={listValue.title} schoolnumber={listValue.schoolnumber} address={listValue.address} title={listValue.address}  />;
                })}
            </table>
        )
    }
});
Rohit Singh Sengar
  • 1,001
  • 8
  • 13
  • This throws the following error: Invariant Violation: SchoolsRender.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object. –  May 17 '16 at 10:54
  • Oh I got what I was doing wrong. Updated the answer. – Rohit Singh Sengar May 17 '16 at 11:15
  • Do you where to add a key to avoid warnings like "Each child in an array or iterator should have a unique "key" prop"? –  May 17 '16 at 13:43
  • Oh I missed that as well. Updated the answer. The key should be added inside this.props.list.map function. It needs to be unique key i.e. I added index. You can have schoolnumber or email as key as long as they are unique. – Rohit Singh Sengar May 17 '16 at 15:47