How can I print array of object into my table using reactjs?

Question

I just want to print array which I get from the firebase. You can see in the image the array data.

In which I convert json object data into the array easily, but I cannot print the array data in table. If I run console.log command on tag that time it print the console data, but not print the array value that I get from the firebase or you can say fetch from the firebase. I want to print these data in table.

 class Contact extends React.Component { constructor() { super(); this.state = { arr: [], inner_key:[], Address:'', printabledata:[], singledata:{} }; self = this; this.printAllRecord = this.printAllRecord.bind(this); } componentWillMount() { var formdata2 = firebase.database().ref("vishal-aaede/"); formdata2.on("value", function (snap) { data = snap.val(); self.setState({arr: data}); }); } componentDidUpdate(){ var data=this.state.arr, headerArray=[]; for (var key in data){ headerArray.push(key); }console.log(headerArray); headerArray.forEach(function(val){ self.printAllRecord(data[val]) console.log(data[val].Name); } ); self.state.singledata=data[headerArray[0]] ; } printAllRecord(param,index){ self.state.printabledata.push(<tr> <td>{param.Name}</td> <td>{param.Round}</td> <td>{param.Email}</td> <td>{param.Date}</td> <td>{param.Phone}</td> <td>{param.Address}</td> <td>{param.Fresher}</td> <td>{param.Time}</td> </tr>); } render() { return ( <div> <h2>Candidate RECORD Coming Soon!!!!</h2> <p>Write Filter Code here </p> <div> <div className="row"> <div className="col-sm-2"></div> <div className="col-sm-8"> <div className = "container-fluid table-responsive"> <table className = "table table-bordered"> <thead> <tr> <th>Name</th> <th>Interview Round</th> <th>Email</th> <th>Date</th> <th>Phone Number</th> <th>Address</th> <th>Gender</th> <th>Experience</th> <th>Time</th> </tr> </thead> <tbody> {this.state.printabledata} </tbody> </table> </div> </div> <div className="col-sm-2"></div> </div> </div> </div> ) } } 

Answer 1

You are repeating elements with the wrong approach. If you want to loop through array elements then you should use array.map methods. You can find some reference here for how we print a list of elements in react .

Answer 2

You can do it using map

this.state.data.map(function(key,map) {
    <table>
        <tr></tr>
        <td>{map.name}</td?
        ....whole code
    </table>
})