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

Matt Way · Accepted Answer · 2018-05-13 04:50:45Z

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.

answered May 13, 2018 at 4:50

Matt Way

33.3k10 gold badges85 silver badges86 bronze badges

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

Collectives™ on Stack Overflow

React DataTable value from Nested Array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related