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 ?
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')
);
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments