如何为功能性React组件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 ?

Answer 1

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