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"));
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.
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"));
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
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?
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, 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.
Thank you both. Going over word by word didn’t work for me but did for you.
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.
The different names of the properties is an obvious issue. I am glad the component works.
Yep. I am glad you get it now.
