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
    listAllRecords.map((listRecord,index) => {
        console.log(listRecord)
        listRecord.subData.map((singleData,index) => {
            console.log(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"
}

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"