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"}

P.S: 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"

you are not returning anything from displayRecords function. — Arun AK
– Arun AK, Commented Nov 13, 2019 at 10:30
@Thinker: i have returned the name filed but i forgot to copy it here. But it does not return any value. — TMA
– TMA, Commented Nov 13, 2019 at 10:35
@Thinker: Not displaying the actual records... But it displaying like this: <div>,</div> — TMA
– TMA, Commented Nov 13, 2019 at 11:34

Shashwat Prakash · Accepted Answer · 2019-11-13 11:03:59Z

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
            })
        })
    }

answered Nov 13, 2019 at 11:03

Shashwat Prakash

4945 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

TMA Over a year ago

Where can i return my records ? :)

Shashwat Prakash Over a year ago

return singleData.name; in displayRecords() method.

TMA Over a year ago

I need to display records in a particular column... so dataFormat is there to display records.

TMA Over a year ago

And yes please remember that to not use setState in the array.map() function.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related