CODEWITHSUNDEEP
javascriptreactjsjsx
linuxNoob
linuxNoob

Reputation: 720

Confused with destructuring assignment within JSX syntax

I am super confused with the destructuring assignment syntax being used in JSX. In version 1 below I get app printed out to the console and in version 2, I get a Type Error - Cannot convert undefined or null to object.

I did read that to execute Javascript within JSX { } are used but I'm still not clear when to use what. I'd like to imagine that since render() is already within { } javascript can be put directly without a need for another set of braces.

Which syntax is correct below? Version 1 or Version 2? I don't know where app is coming from so I can't verify it that way.

class FormApplication extends React.Component {

render() {
const { app, locale } = this.props;

  // Version 1
  let ownPropNames = Object.getOwnPropertyNames({app});

  // Version 2
  let ownPropNames = Object.getOwnPropertyNames(app);

  console.log('app own prop names are:' + ownPropNames );
return (
  <Provider store={store}>
    <Summary locale={locale} app={app}>
      <FormContainer/>
    </Summary>
  </Provider>
);
}
}

Upvotes: 0

Views: 151

Answers (3)

Zilvinas
Zilvinas

Reputation: 5578

Version 2 is correct if you're trying to get the properties of app. This is not related to your render() braces, but you're passing a parameter to a function.

Upvotes: 1

stateless
stateless

Reputation: 246

Version 2 is correct.

Destructuring the object from this.props declares two new const variables, equivalent to this- 

const app = this.props.app
const locale = this.props.locale

In your version 1 - The syntax 

{app}

is equivalent to 

{app:app}

In your version 2 - The const app is accessed correctly and directly.

Upvotes: 3

linuxNoob
linuxNoob

Reputation: 720

It seems like Version 1 is printing the Object as is and version 2 prints the value of the property named app of the Object.

Upvotes: 0

Related Questions