React DataTable value from Nested Array

Question

Please look at my code:

import React, { Component } from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';

class App extends Component {
  constructor() {
    super();
    this.state = {
        student: [  
          {  
             "studentName":"Jack",
             "stdCtExamMarks":[  
                {  
                   "subjectName":"English "
                }
             ]
          },
          {  
             "studentName":"John",
             "stdCtExamMarks":[  
                {  
                   "subjectName":"Bangla "
                }
             ]
          }
       ]
    };
}
  render() {

    return (
      <div className="App">
    <BootstrapTable data={this.state.student} >
      <TableHeaderColumn dataField="studentName" isKey={true} dataAlign="center" dataSort={true}>Name</TableHeaderColumn>
      <TableHeaderColumn dataField="stdCtExamMarks.subjectName" dataSort={true}>Subject</TableHeaderColumn>

  </BootstrapTable>
      </div>
    );
  }
}

export default App;

In the Table I can get the value of studentName , but i need the value subjectName as well. How can i do that?

"studentName" simply works when i put it in the dataField but the nested array of "stdCtExamMarks" doesn't throw any value in the field

Answer 1

I haven't used this control before, but based on the docs you might be able to use the dataFormat attribute of TableHeaderColumn. Something like this:

subjectFormatter(cell, row) {
  return cell[0].subjectName
}

render(){
  return (
    ...
    <TableHeaderColumn dataField="stdCtExamMarks" dataFormat={this.subjectFormatter} dataSort={true}>Subject</TableHeaderColumn>
    ...
  )
}

Just note that the stdCtExamMarks is an array as you have described it above, so I have used index 0, but you might want to get something different.