title: How to pass nested json to BootstrapTable in react-bootstrap-table2
body: <p>I have a table and when a row is clicked, an additional row of more detail is display. I'm using reactJS and react-bootstrap-table2's BootstrapTable.</p>
  
  <p>The below is my json file: </p>
  
  <pre><code>{
  "persons": [{
      "id": 1,
      "name": "A",
      "email": "a@email.com",
      "contracts": [{
          "metric": "metric1",
          "contract_detail": [{
              "cpm": 5,
              "country_code": "US"
          },{
              "cpm": 1,
              "country_code": "AU"
          }]
      },{
          "metric": "metric2",
          "contract_detail": [{
              "cpm": 5,
              "country_code": "US"
          },{
              "cpm": 1,
              "country_code": "AU"
          }]
      }]
  },
  ... ]}
  </code></pre>
  
  <p>The below is the expandRow in react-bootstrap-table2</p>
  
  <pre><code>renderer: row =&gt; (
              &lt;div&gt;
                  &lt;BootstrapTable
                      data={row.contracts}
                      columns={this.state.contract_columns}
                      keyField='id'
                      &gt;
                      &lt;/BootstrapTable&gt;
              &lt;/div&gt;
          )
  </code></pre>
  
  <p>I expected that just passing <code>row.contracts</code> as the data will populate all the fields but the country_code and cpm fields are empty.</p>
  
  <p>I also tried looping with map and filter but in this case, no table is being displayed.</p>
  
  <p>Im new to react and js so finding it a big hard to debug. Any help will be appreciated.
  Thanks !</p>