ReactJs Component Attributes

By: Stephen Patrick | 19 Aug 2016 | Category: ReactJs Introduction

Related Contents

Reactjs Component Attributes

As mentioned Reactjs allows us to build custom view components that encapsulate both state and the behavior required to render the view. Reactjs also provides a means to pass arguments to components as attributes. Reactjs facilitates this by providing a props property.

For example let’s modify the previous example of rendering a table to pass the data required to render it, instead of hard coding this data within the component.

<script type="text/babel">
var Table = React.createClass({render: function() {
   var headings = this.props.headings.map(function(header) {
           return <th>{header}</th>
       });


       var tableRows = this.props.dataset.map(function(row){
           return <tr>
               <td>{row.firstName}</td>
               <td>{row.lastName}</td>
           </tr>
       });

       return <table>
           <thead>
               {headings}
           </thead>
           <tbody>
               {tableRows}
           </tbody>
       </table>

   }});

var headings = ["First Name", "Last Name"];
var dataset = [
       {firstName: "Mark", lastName: "Stevens"},
       {firstName: "John", lastName: "Doe"},
];

ReactDOM.render(<Table headings={headings} dataset={dataset} />,   
   document.getElementById('container'));

</script>

Above we define the arguments that we wish to pass to our component.

var headings = ["First Name", "Last Name"];
var dataset = [
    {firstName: "Mark", lastName: "Stevens"},
    {firstName: "John", lastName: "Doe"},
];

We pass the arguments to the component as we create it.

ReactDOM.render(<Table headings={headings} dataset={dataset} />,   
   document.getElementById('container'));

Also, note that above we use JSX to create the Table component. Within our component logic we use the props property provided by Reactjs, to access the passed data.

this.props.headings.map(function(header) {
   return <th>{header}</th>
});

this.props.dataset.map(function(row){
   return <tr>
           <td>{row.firstName}</td>
           <td>{row.lastName}</td>
          </tr>
});

Finally, we render our template surrounding the dynamic data within chain brackets.

return <table>
          <thead>
              {headings}
          </thead>
          <tbody>
              {tableRows}
          </tbody>
      </table>

Reactjs Spread Attributes

Reactjs provides a feature known as Spread Attributes. This feature is useful when you don’t know ahead of time the exact attributes your component requires. Spread attributes allow you do define default attributes. These attributes can be later overridden.

var headings = ["First Name", "Last Name"];
var dataset = [
       {firstName: "Mark", lastName: "Stevens"},
       {firstName: "John", lastName: "Doe"},
];

var props = {};
props.headings = headings;
props.dataset = dataset;

var headingsOverride = ["First", "Last"];
ReactDOM.render(<Table {...props} headings={headingsOverride} />, 
   document.getElementById('container'));