Why data not displaying in the react-bootstrap-table?

Question

I want to display a raw data in the react-bootstrap-table. The data which i am passing as property in the bootstrap table is displaying properly in the console but it is not displaying in the table respected rows.

The function from which i am getting records.

displayRecords = () => {
    var listAllRecords = this.props.data
    return (
    listAllRecords.map((listRecord,index) => {
        console.log(listRecord)
        listRecord.subData.map((singleData,index) => {
            console.log('singleData:' +index,singleData)
            return singleData.name
        })
    }) )
}

Bootstrap table in which i want dislpay those records.

<BootstrapTable ref='table' data={this.props.data}>
<TableHeaderColumn dataField='records' dataFormat={this.displayRecords}>Record</TableHeaderColumn>
</BootstrapTable>

Result of console.log(listRecord)

Table Row1: { 
subData: Array(2)
0: {id: 1, name: "data1"}
1: {id: 2, name: "data2"}
id: 2
image: null
name: "John"
}
Table Row2:{ 
subData: Array(3)
0: {id: 1, name: "data1"}
1: {id: 2, name: "data2"}
2: {id: 3, name: "data3"}
id: 3
image: null
name: "Doe"
}

console log of singleData

singleData: 0 {id: 2, name: "data"}
singleData: 1 {id: 3, name: "data1"}

singleData: 0 {id: 2, name: "data"}
singleData: 1 {id: 3, name: "data1"}

singleData: 0 {id: 2, name: "data"}
singleData: 1 {id: 3, name: "data1"}
singleData: 2 {id: 4, name: "data1"}

PS: There are three rows records.

So, i want to display records in the table rows as the respected row wise like in the first row it should be display "data1, data2" and in the second row it shoud be display "data1,data2,data3"

Answer 1

Try this lines of code:- 1. Make a state:-

this.state = {
     dataList:[]
}

2. Add this in render() function:-

<BootstrapTable data={dataList}>
    <TableHeaderColumn isKey dataField='id'>ID</TableHeaderColumn>
    <TableHeaderColumn dataField='name'>Name</TableHeaderColumn>
</BootstrapTable>

3. Modify displayRecords() method:-

displayRecords = () => {
        var listAllRecords = this.props.data
        listAllRecords.map((listRecord,index) => {
            console.log(listRecord)
            this.setState({
                 dataList: listRecord
            })
            listRecord.subData.map((singleData,index) => {
                console.log(singleData)            
                singleData.name
            })
        })
    }