CODEWITHSUNDEEP
reactjsreact-bootstrap-table
Shamoon
Shamoon

Reputation: 43491

How do I do conditional columns with React Bootstrap Table?

In my render method of my WorkbookList component, I have

render() {

  const tableHTML = (
    <BootstrapTable data={this.props.workbooks} striped={true} hover={true}>
      <TableHeaderColumn
        dataField="id"
        isKey={true}
        dataAlign="center"
        columnClassName={ this.tdClassFormatter }
        width='50px'>
        ID
      </TableHeaderColumn>
      <TableHeaderColumn dataField="createdAt" width='130px' dataFormat={(cDate) => moment(cDate).format('MMM D, \'YY (h:mm a)')}>Created On</TableHeaderColumn>
      {!this.props.minimized && (<TableHeaderColumn dataField="id" dataFormat={this.actionFormatter} dataAlign="center"></TableHeaderColumn>)}
    </BootstrapTable>
  )

  return (
    <div>
      <h2 className="clearfix">
        <div className="pull-left">Workbooks</div>
        <div className="pull-right">
          <LinkContainer to={`/workbooks/create/${this.props.studentId}`}>
            <Button bsStyle="success">Add</Button>
          </LinkContainer>
        </div>
      </h2>

      {tableHTML}
    </div>
  )
}

When I load the component:

<WorkbookList workbooks={this.props.studentState.workbooks} studentId={this.props.params.studentId} minimized={true} />

But this gives me an error:

Uncaught TypeError: Cannot read property 'props' of null
    at bundle.js:159154
    at forEachSingleChild (bundle.js:11160)
    at traverseAllChildrenImpl (bundle.js:12178)
    at traverseAllChildrenImpl (bundle.js:12194)

So how can I conditionally show a column?

Upvotes: 4

Views: 4184

Answers (1)

Hosar
Hosar

Reputation: 5292

Your tableHTML should be a stateless component. Stateless components are functions that receive props.
e.g. (apply to your own needs)

class MainCmp extends Component {
    render(){
        const TableHTML = (props) => {
            return (
                <div style={props.color}>
                    <h1>
                        Title
                    </h1>
                    {
                        props.show ? <span>Some message</span> : null
                    }                    
                </div>
            );
        };

        return (
            <div>
                Main
                <TableHTML color={{color:'blue'}} show={true} />
            </div>            
        );
    }
}

And to allow dynamic show/hide use some state handler. Observer that props inside stateless component don't use this keyword.

Upvotes: 2

Related Questions