Render a functional component with a props

[crystalio303]

This functional component is going to display a greeting for a variable name. I don not understand props as well as I would like so this is not working.

const Welcome = (props) =>	<h1>Hello, {props.user}</h1>;
	<Welcome user="Constance the Badger" />;
ReactDOM.render(<Wellcome />, document.getElementById("root"));

[texas2010]

Hi, I noticed you have a misspelling component name. You wrote Wellcome in the ReactDom.render. More like it is not working because of misspelling.

[crystalio303]

Typo noted. The render method of a class component is being used, but functional components have no component return. There only needs to be a ReactDOM render.

Afunctional component with direct parameter of the attribute

const Welcome = ({user}) =>
<h1>Welcome, {user}.</h1>;
ReactDOM.render(<Welcome user="Constance the badger" />, document.getElementById("root"));

Another functional component that should using props that does not work. Guidance would be appreciated.

const Welcome = (props) =>
<h1>Welcome, {props.user}.</h1>;
ReactDOM.render(<Welcome props.user="Constance the badger" />, document.getElementById("root"));

[jwilkins.oboe]

Hi @crystalio303 !

It should be user=“Constance the badger”

const Welcome = (props) =>
<h1>Welcome, {props.user}.</h1>;
ReactDOM.render(<Welcome user="Constance the badger" />, document.getElementById("root"));

There is a similar example in the documentation

Components and Props – React

[crystalio303]

This returns “Welcome, .” Welcome is getting passed in as the element but user has no effect on the element. How would I make user active?

[jwilkins.oboe]

@crystalio303

This returns “Welcome, .”

If you run the code it displays
Welcome, Constance the badger

Are you not seeing this on your end?

That’s what you wanted displayed right?

[crystalio303]

This is the output.

Functional Components in React (codepen.io)

[texas2010]

@crystalio303, I see a problem. you using the prop.name. but in that component already have props.user. So you need to use the user, not the name.

You can check on @jwilkins.oboe codepen, she shows their code.

[crystalio303]

Thank you both. Going over word by word didn’t work for me but did for you.

[texas2010]

Welcome anytime. We need to use the correct property name. So it will show. If we use a different property name and it does not exist. That will not work at all. I hope it is clear.

[crystalio303]

The different names of the properties is an obvious issue. I am glad the component works.

[texas2010]

Yep. I am glad you get it now.