salivan salivan - 1 year ago 40
React JSX Question

passing default object as function parameter es6 works but not as plain parameter

I don't get it, why this works?

import React from 'react'

import './Card.scss'

export default ({ type = 'single' }) => (

and this doesn't?

import React from 'react'

import './Card.scss'

export default ( type = 'single' ) => (

Answer Source

In a comment, you've said you're using it as a React component directly, e.g.:

<Card type="single" />



You need to use the destructured version (your first example) because React components are called with a single argument, an object containing the properties for the component (a blank object if you don't specify any properties). A non-destructured one doesn't make sense, the type you'd receive would be an object, not a string.

Here's a snippet demonstrating what React passes to the component, which should clarify why expecting a simple argument as a string won't work:

let Example = (props) => (
  <div>props: [{JSON.stringify(props)}]</div>
let Card = ({type = "simple"}) => (
  <div>Type: [{type}]</div>
    <Example />
    <Example answer="42" />
    <Card type="simple" />
<div id="react"></div>
<script src=""></script>
<script src=""></script>

Original answer before you clarified you were using this directly as a component:

Both work, it's a matter of how you call each of them.1

Your first example should be called like this:

import thingy from 'somewhere';
thingy({type: 'double'});
//     ^--------------^---- note it's an object

...because it destructures its argument.

Your second example should be called like this:

import thingy from 'somewhere';
//     ^------^---- note it's not an object

...because it just uses a simple argument.

Separately: Your first example doesn't have a default value for the argument, so you can't call it with no arguments at all:

// Doesn't work for the first example

If you wanted to be able to do that, you'd need to supply an overall default:

export default ({ type = 'single' } = {}) => (
// Overall default ----------------^^^^^

But your second example can be called with no arguments at all, because it has a default for its only argument.

(That doesn't matter, React always calls it with a single object argument.)