Edit Description (#34329)
* Edit Description Making some editing to make the description more understandable. I am a beginner but I think me edits makes more sense. If you think so, please merge them for helping others. * Update curriculum/challenges/english/03-front-end-libraries/react/pass-props-to-a-stateless-functional-component.english.md Co-Authored-By: Ahmed-Elbessfy <ahmedelbessfy@gmail.com>pull/30085/head^2
parent
063257939b
commit
61a5707ba7
|
@ -7,9 +7,9 @@ isRequired: false
|
|||
|
||||
## Description
|
||||
<section id='description'>
|
||||
The previous challenges covered a lot about creating and composing JSX elements, functional components, and ES6 style class components in React. With this foundation, it's time to look at another feature very common in React: <b>props</b>. In React, you can pass props, or properties, to child components. Say you have an <code>App</code> component which renders a child component called <code>Welcome</code> that is a stateless functional component. You can pass <code>Welcome</code> a <code>user</code> property by writing:
|
||||
The previous challenges covered a lot about creating and composing JSX elements, functional components, and ES6 style class components in React. With this foundation, it's time to look at another feature very common in React: <b>props</b>. In React, you can pass props, or properties, to child components. Say you have an <code>App</code> component which renders a child component called <code>Welcome</code> which is a stateless functional component. You can pass <code>Welcome</code> a <code>user</code> property by writing:
|
||||
<blockquote><App><br> <Welcome user='Mark' /><br></App></blockquote>
|
||||
You use <strong>custom HTML attributes</strong> that React provides support for to pass the property <code>user</code> to the component <code>Welcome</code>. Since <code>Welcome</code> is a stateless functional component, it has access to this value like so:
|
||||
You use <strong>custom HTML attributes</strong> created by you and supported by React to be passed to the component. In this case, the created property <code>user</code> is passed to the component <code>Welcome</code>. Since <code>Welcome</code> is a stateless functional component, it has access to this value like so:
|
||||
<blockquote>const Welcome = (props) => <h1>Hello, {props.user}!</h1></blockquote>
|
||||
It is standard to call this value <code>props</code> and when dealing with stateless functional components, you basically consider it as an argument to a function which returns JSX. You can access the value of the argument in the function body. With class components, you will see this is a little different.
|
||||
</section>
|
||||
|
|
Loading…
Reference in New Issue