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

Question

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 ?

Code Maniac · Accepted Answer · 2019-06-02 12:31:26Z

7

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')
);

answered Jun 2, 2019 at 12:31

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Salar Bahador Over a year ago

Tnx it's working now. why is it filled the name and username values in some kind of opossit syntax?

Code Maniac Over a year ago

@SalarBahador the syntax is { propertyName : reference variable } you can read this for more info

Salar Bahador Over a year ago

So this structure is different than other object structures in javascript? in the usual way, we say define object like : obj = { key : value }

Code Maniac Over a year ago

@SalarBahador here you're not defining a object you're picking values from object

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related