Ad

React - Mapping Inherited Props Onto HTML Elements

- 1 answer

I think the code is quite self explanatory. I want to map this.props.tabAttr (an array of objects) on to HTML elements.

import React from 'react';
var Tab = React.createClass ({

        propTypes : {
            tabAttr : React.PropTypes.array.isRequired
        },

        render : function () {
            return (
                {this.props.tabAttr.map (function (ob) {
                    return (
                        <div class = {ob.tabClassName}>
                            <span> {ob.tabName} </span>
                        </div>
                    )}
                )}
            );
        }
    });

    export default Tab;

Webpack is reporting an error on {this.props.tabAttr.map (function (ob) {... : Module build failed, unexpected token...

Ad

Answer

In React for set class attribute you should use className instead of class, change this

 <div class = {ob.tabClassName}>

to

 <div className={ob.tabClassName}>

and component must have only one root element

render: function () {
  var tabs = this.props.tabAttr.map (function (ob, index) {
    return <div key={index} className={ob.tabClassName}>
      <span> {ob.tabName} </span>
    </div>
  });

  // Component has only one root element
  return <div>
    { tabs }
  </div>;
}

Example

Ad
source: stackoverflow.com
Ad