CODEWITHSUNDEEP
javascriptreactjsecmascript-6destructuring
Salar Bahador
Salar Bahador

Reputation: 1494

How can I implement destructuring assignment for functional react components props?

I'm trying to pass functional component props by destructuring assignment method.

In this example below I have tried to use this concept but it doesn't work. the result of this code return empty and doesn't print that prop.

import React from 'react';
import { render } from 'react-dom';

const App = ({ username: name }) => (<h1>{username}</h1>)

render(
   <App name="Tom" />,
   document.getElementById('root')
);

Any ideas on how to handle this issue ?

Upvotes: 3

Views: 253

Answers (1)

Code Maniac
Code Maniac

Reputation: 37755

Your're passing prop from App as name not username

change this 

const App = ({ username : name })

to this 

const App = ({ name: username })

import React from 'react';
import { render } from 'react-dom';

const App = ({ name: username }) => (<h1>{username}</h1>)

render(
   <App name="Tom" />,
   document.getElementById('root')
);

Upvotes: 7

Related Questions