CODEWITHSUNDEEP
javascriptreactjs
Jonny
Jonny

Reputation: 1283

Passing props into React component

I am just starting to learn React and am creating components and passing props in to them.

Do I have to reference props in the JSX element in the below example (I have seen examples where props is referenced and where it's not and both options seem to work):

const name = 'Jonny'

function Name (props) {
  return (
    <h1>Name: {props.name}</h1>
  )
}

ReactDOM.render(
  <Name name={name} />,
  document.getElementById('app')
)

If I run the code exactly the same only removing the props reference in this line, it seems to work fine as well:

h1>Name: {name}</h1>

My question is, does the props reference at that point have to be there, and if not, why is it sometimes placed there?

Upvotes: 2

Views: 2220

Answers (7)

Alok Rai
Alok Rai

Reputation: 95

The example that you are showing is the example of stateless functional component, So when you are using stateless functional component react automatically reference the props to that component method.

In ES6 object destructuring feature you can avoid placing { props.name } every time.

You can directly access it with the name of the property. You don't need to reference each time with props.

So both cases it will work.

Upvotes: 0

Yugandhar
Yugandhar

Reputation: 601

You have to use props.name , the only reason it works same for you in both cases is the global name variable in same file.
You can try it out by passing some other string in component as prop.

Upvotes: 0

esewalson
esewalson

Reputation: 230

In order for props to show up in a child component you need to include them when creating the component definition. What is happening in your instance I think is that you define name and then reference it using {name}. This is not pulling from props but rather pulling from the define const variable.

You wouldn't need to pass props in for your example to work as this is defining the app and unless you are passing props into the react app ( in this instance) props are not necessary.

You will likely create a child component in which case you would probably want to set props on this child component to be used within said component. That would be done as you have done but not in the ReactDOM.render section.

Upvotes: 0

adam.k
adam.k

Reputation: 632

It is because you have defined name in the same file. Define name outside of the component file and pass it through the parent component

Parent File:

 function ParentComponent = () => {
 return (
   <Child name='John' />
 )
}

Child File: 

 function Child (props) {
  return (
     <p>{props.name}</p>
  )
}

Upvotes: 0

Daniel Adepoju
Daniel Adepoju

Reputation: 821

The reason <h1>Name: {name}</h1> worked is that you have a const name = 'Jonny' . props.name is used when another component is needed to pass the value of name to the next component. Say for example the code below:

...
render(){
return (<DisplayName name='Johnny' />)
}

From the DisplayName component, you'll need to access name via props.name like this:

render(){
  return() => (
    <h1>{this.props.name}</h1>
    )
  }

OR:

DisplayName = ({name}) => ( // destructing name from the props received
<h1>{name}</h1>
)

Upvotes: 0

Shubham Khatri
Shubham Khatri

Reputation: 281686

Since the global variable is in the same file as the component which is using it, it works both from props or without it.

However in short, you need to access a value from props if you pass it on to the component as a prop

In your case

<Name name={name} />

name is passed a prop and hence accessing it like props.name is the right thing to do, since it may so happen that Name component is being rendered from somewhere else too and there the name variable may not be defined a global.

Upvotes: 1

Mayank Shukla
Mayank Shukla

Reputation: 104379

Its because, you have defined name variable globally and passing the name value in props by the same key name.

So in this case: <h1> {name}</h1>, its taking the globally defined name value and in case of <h1>{props.name}</h1> it will take the value passed in props not the global one.

Now if you want to see the diff, then pass the name value in props using some other key for ex:

<Name nameValue={name} />

And render it using <h1> {props.name} </h1>, you will not see anything because name key is not present in props object.

But if you use {props.nameValue} you will see the proper value.

Upvotes: 1

Related Questions