Accessing nested json in ExpandRow of bootstrap table react component

Question

I have a bootsrap table react component and I will like to add the nested json record as a table when each row in the bootstrap table, the row should expand and show the nested json has a table. However, I can not access the nested json in the expand row function.

My Goal: Presently I have a table showing the data of the outer json in a table. However, I want the elements in the the nested json summary to be represented in a table when each row is clicked.

    const userList = [
      { id: 1, firstName: "james", lastName: "smith", age: 20,summary:{city:'lag', min:12} },
      { id: 2, firstName: "alex", lastName: "green", age: 20 , summary:{city:'lao', min:121}},
      { id: 3, firstName: "may", lastName: "jones", age: 18, summary:{city:'dag', min:112} }
    ];
    
columns=[
{text:'id',dataField:id},
{text:'firstName',dataField:id firstName},
{text:'lastName',dataField: lastName}
]
    
    const expandRow = {
      renderer: row => (
        <BoostrapTable data={userList} columns={row.columns.summary}/>
      )
    };
    
    <BoostrapTable data={userList} columns={columns} keyField="id expandRow={ExpandRow}/>

Answer 1

You are using the wrong variable, it's not rows, but row:

const expandRow = {
  renderer: row => (
    <BoostrapTable data={[row.summary]} columns={{text:'city',dataField:'city'},
{text:'min',dataField:'min'}}/>
  )
};