JavaScript expressions

"Shawn, let's discuss a bit about how we have rendered the Rows and Headings tag."

render: function() {
    var headings = this.props.headings.map(function(name) {
      return(<Heading heading = {name}/>);
    });

   return <tr>{headings}</tr>;
  }

"We are rendering {headings}, which is a list of React components, directly by adding them in curly braces as children of the <tr> tag. These expressions that are used to specify the child components are called child expressions."

"There is another category of expressions called as JavaScript expressions. These are simple expressions used for passing props or evaluating some JavaScript code that can be used as an attribute value."

// Passing props as expressions
ReactDOM.render(<App headings = {['When', 'Who', 'Description']} 
                  data = {data} />, 
                document.getElementById('container'));

// Evaluating expressions
ReactDOM.render(<App headings = {['When', 'Who', 'Description']} 
                  data = {data.length > 0 ? data : ''} />, 
                document.getElementById('container'));

"Anything that is present in curly braces is evaluated by JSX. It works for both children expressions as well as JavaScript expressions," added Mike.

"Thanks for the detailed explanation. I have a query though. Is there any way to write comments in the JSX code? I mean, we may not need it all the time, but knowing how to add comments might be handy," Shawn asked.

"Remember the curly braces rule. Comments are simply just JavaScript expressions. When we are in a child element, just wrap the comments in the curly braces."

render: function() {
    return(<th> 
             {/* This is a comment */}
             {this.props.heading}
           </th>);
  }

"You can also add comments in a JSX tag. There is no need to wrap them in curly braces in this case," Mike added.

ReactDOM.render(<App 
                  /* Multi
                     Line 
                     Comment
                  */
                  headings = {headings} 
                  changeSets = {data} />, 
                document.getElementById('container'));