CODEWITHSUNDEEP
javascriptreactjs
Martin Fahl
Martin Fahl

Reputation: 947

How to pass the return value of a function as a property to a react component

How is it possible to pass the return value of a function to a property of a react component? For the following example a TypeError: props.columns is undefined is thrown.

        <ReactDataGrid
          columns={this.props.data['head'] && this.props.data['head']['vars'].map(function(heading) {
                return {key: heading, name: heading, editable : true}
          })}
        rowGetter={this.rowGetter} />

Upvotes: 1

Views: 4188

Answers (1)

Martin Fahl
Martin Fahl

Reputation: 947

The solution is to put the null check outside of the property:

      if (this.props.data['head']) {
        return (
          <ReactDataGrid
          columns={this.props.data['head']['vars'].map(function(heading) {
              return {key: heading, name: heading, editable : true}
          })}
          rowGetter={this.rowGetter} />
        )
      } else {
        return (<span>Loading</span>)
      }

Upvotes: 1

Related Questions