Passing/Accessing props in stateless child component

Question

I know you can pass all a react components props to it\'s child component like this:

const ParentComponent = () => (
   

     
Parent          


        
      

Answer 1

Are you looking for the ES6 named argument syntax (which is merely destructuring) ?

const ChildComponent = ({ propName }) => (
    

     
Child Component
 
)

const ChildComponent = (props) => ( // without named arguments
    

     
Child Component
 
)

Optionally there is a second argument to your function depending of whether you specified a context for your component or not.

Perhaps it would be more helpful wityh a links to the docs. As stated in the first article about functional components. Whatever props passed on to the component is represented as an object passed as first argument to your functional component.

To go a little further, about the spread notation within jsx.

When you write in a component :

What your component will receive is an plain object which looks like this :

{ prop1: value1, prop2: value2 }

(Note that it's not a Map, but an object with only strings as keys).

So when you're using the spread syntax with a JS object it is effectively a shortcut to this

const object = { key1: value1, key2: value2 }

Is equivalent to

And actually compiles to

return React.createElement(Component, object); // second arg is props

And you can of course have the second syntax, but be careful of the order. The more specific syntax (prop=value) must come last : the more specific instruction comes last.

If you do :

It compiles to

React.createElement(Component, _extends({ key: value }, props));

If you do (what you probably should)

It compiles to

React.createElement(Component, _extends(props, { key: value }));

Where extends is *Object.assign (or a polyfill if not present).

To go further I would really recommend taking some time to observe the output of Babel with their online editor. This is very interesting to understand how jsx works, and more generally how you can implement es6 syntax with ES5 tools.