Search code examples
reactjsecmascript-6destructuring

React, Why the {} when passing props to stateless functional component?


My feeling is that the ({course}) syntax is extracting the property 'course' from the props object. Thereby making calls to 'course' properties inside the component more terse. If I passed props using the (props) syntax, in place of ({course}). I would then have to say 'props.course.authorId', for example.

Is my line of thinking correct? It would be great if you can expand on exactly whats happening here, and fill in any gaps.

import React, {PropTypes} from 'react';
import {Link} from 'react-router';

const CourseListRow = ({course}) => {
  return (
    <tr>
      <td><a href={course.watchHref} target="_blank">Watch</a></td>
      <td><Link to={'/course' + course.id}>{course.title}</Link></td>
      <td>{course.authorId}</td>
      <td>{course.category}</td>
      <td>{course.length}</td>
    </tr>
  );
};

CourseListRow.propTypes = {
  course: PropTypes.object.isRequired
};

export default CourseListRow;

Solution

  • You are correct. In ES6 syntax, the function signature

    const CourseListRow = ({course}) => { ... }
    

    is the same as the ES5 code

    var CourseListRow = function(props) {
        var course = props.course;
        ...
    }
    

    This is called destructuring.