why should we write props in curly braces while using in child component

Admin 1
Viewed 1211

While passing prop as an argument in Person(Child Component) function why we should write props in curly braces?

App.js

import React from 'react';
import Person from './Person';

const App = () => {
  return (
  <div>
     <Person name={"John"} /> 
  </div>
);
}

export default App;

Person.js

import React from 'react';

const Person = ({name}) => {       //I am talking about this line
  return (
  <div>
     <h1/>My name is {name}.</h1>
  </div>
);
}

export default Person;
react-props reactjs
2 Answers

If the string prop to be passed down is static - as it is here - there's no need to.

<Person name="John" />

will work just fine.

You need {}s whenever the value to be passed down isn't static - for example, when it comes from a variable:

<Person name={nameFromState} />

You also need {}s when interpolating anything into JSX (outside of props), as you see in

<h1/>My name is {name}.</h1>

This line

const Person = ({name}) => {

is just destructuring, which is equivalent to

const Person = (props) => {
  const { name } = props;

which is equivalent to

const Person = (props) => {
  const name = props.name;

All of those possibilities work just fine, but some prefer to destructure in the argument list to make things more concise.

user_95152070
user_61083900
Related