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;
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.