Dynamic column creation in react js

Question

I have the following data in my code:

this.state.data = [
                   {"col0":"Service Port","col1":80,"col2":8080}
                   {"col0":"Service Name","col1":"--","col2":"--"}               
                  ]

render function:

............
............
<div className="row">
                    <div className="col-lg-12">
                        <CollapsiblePanel name="Services"
                                          bsStyle="info"
                                          open>
                            <BootstrapTable data={this.state.data}
                                            striped
                                            hover>
                                {/*{
                                    for(var i = 0; i < this.state.data.length; i++) {
                                        var col = 0;
                                        for(var j = 0; j < this.state.data[i].length; j)
                                        <TableHeaderColumn 
                                            className="tableHeader"
                                            dataField={this.state.col++}
                                    }
                                }*/}
                                <TableHeaderColumn
                                    className="tableHeader"
                                    dataField="col0"
                                    isKey
                                    width="40%"></TableHeaderColumn>
                                <TableHeaderColumn
                                    className="tableHeader"
                                    dataField="col1"
                                    width="40%"></TableHeaderColumn>
                                <TableHeaderColumn
                                    className="tableHeader"
                                    dataField="col2"
                                    width="40%"></TableHeaderColumn>
                            </BootstrapTable>
                        </CollapsiblePanel>
                    </div> 
                </div>

What i want to do is to dynamically create the TableHeaderColumns because there could be more or less col keys in my data array, such as col3, col4, etc. I tried to integrate a for-loop inside render but it didn't do the work (im not sure how to do that in react).

Could anyone suggest how to do that dynamically? Thanks!

Garrett McCullough · Accepted Answer · 2017-07-07 21:45:50Z

1

Use Array.prototype.map

<BootstrapTable data={this.state.data}
  striped
  hover>
  {
    this.state.data.map((item) => {
      return (
        <TableHeaderColumn
          className="tableHeader"
          dataField={item.col0}
          isKey
          width="40%" />
      );
    }
  }
</BootstrapTable>

answered Jul 7, 2017 at 21:45

Garrett McCullough

9807 silver badges15 bronze badges

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

2 Comments

darkknight Over a year ago

This will only print the item.col0 values. Not sure if this is what is being requested.

user7186947 Over a year ago

i'd like to print all col values, i.e. col0, col1 and col2

Luis Deras · Accepted Answer · 2017-07-07 22:23:31Z

0

First, you would have to store your dynamic columns somewhere, I'll assume these columns are coming from a parent component, so I will set them as default props.

    class MyOwnComponent extends from React.Component{
        static defaultProps = {
            cols = [
                {
                    className: "tableHeader",
                    dataField: "col0",
                    width: "40%"
                },
                {
                    className: "tableHeader",
                    dataField: "col1",
                    width: "40%"
                },
                {
                    className: "tableHeader",
                    dataField: "col2",
                    width: "40%"
                }    
            ]        
        }

        render(){
            return(
                    <div className="row">
                        <div className="col-lg-12">
                            <CollapsiblePanel name="Services"
                                            bsStyle="info"
                                            open>
                                <BootstrapTable data={this.state.data}
                                                striped
                                                hover>
                                    {/*{
                                        for(var i = 0; i < this.state.data.length; i++) {
                                            var col = 0;
                                            for(var j = 0; j < this.state.data[i].length; j)
                                            <TableHeaderColumn 
                                                className="tableHeader"
                                                dataField={this.state.col++}
                                        }
                                    }*/}
                                    {
                                        this.props.cols.map(function(item){
                                        return (
                                            <TableHeaderColumn className={item.className} dataField={item.dataField} width={item.width}/>
                                        )}
                                    )}                                
                                </BootstrapTable>
                            </CollapsiblePanel>
                        </div> 
                    </div>
            )
        }
    }

Regarding the key, React encourages you to have a unique ID for each instance of a component, sort of speak. If you don't have it you could work around it with an index when iterating using map function. Like this:

    this.props.cols.map(function(item, index){
    return (
        <TableHeaderColumn key={index} className={item.className} dataField={item.dataField} width={item.width}/>
    )}

Please check documentation for more reference:

React Lits & Keys

edited Jul 7, 2017 at 22:23

answered Jul 7, 2017 at 21:51

Luis Deras

1,2782 gold badges21 silver badges50 bronze badges

4 Comments

user7186947 Over a year ago

what about the key? @ggderas how could i make col0 a key?

Luis Deras Over a year ago

If you're sure you're col0, col1, ... colN won't ever repeat, then you can use it as a key. But you have to make sure

user7186947 Over a year ago

thats not really what i wanted :(. its creating 6 columns (i think based on rows), but i would like it to create only 3 (col0, col1, and col2) @ggderas

user7186947 Over a year ago

i meant 3 cols total (col0, col1, col2)

Collectives™ on Stack Overflow

Dynamic column creation in react js

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related