Reactjs JavaScript Expressions

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

Related Contents

Reactjs JavaScript Expressions

Reactjs JavaScript expressions facilitate the inclusion of dynamic data. We can use JavaScript expressions, to create elements from dynamic data. JavaScript expressions are defined within chain brackets { and }. We can include any piece of JavaScript code within those expressions.

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.userType ==1 ? "Admin" : "User"}</td>
               <td>{row.firstName}</td>
               <td>{row.lastName}</td>
           </tr>
       });

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

   }});

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

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

Above a new property is added to the dataset called userType. We then use a JavaScript expression when rendering the userType property to output a label for the users role.

<td>{row.userType ==1 ? "Admin" : "User"}</td>

JavaScript Comments

We can also use expression to write JavaScript comments.

{/* This is a comment */}

{/* This is a 
comment 
spread over multiple lines
*/}