Understanding Props in React

what is props?:

• Props stand for properties.
• Props passed the arguments into react components
• Props allow us to send data from a parent component to a child component.
• They make components reusable and dynamic

When we use props?:

• we want to need pass the data from parent to a child component.
• We want to make reusable component (like button,cards,headers).
• We want to need display dynamic values(usernames,messages,product details).

How we use props?:

Props pass from parent components:

import Greeting from './Greeting';

function App(){
return(

<div>
<Greeting name="vadivu"/>
<Greeting name="lakshmi"/>
</div>
)

}
export default App;

Receive props in child components:

function Greeting(props){
return(
<h1> hello,{props.name}!</h1>

)
}
export default Greeting;

output:
hello, vadivu!
hello, lakshmi!

OR

function Greeting({ name }){
return(
<h1> hello,{name}!</h1>

)
}
export default Greeting;

Here why we use props:

• Reusable components with different data.
• Code cleaner and maintainable.
• To make UI flexible and dynamic.

Why use{props.name}and here what is dot(.)

• In react props is a object.
• When we pass name="vadivu" to a component react collect in a object like

props={name="vadivu"}

• To acess the value inside the object we use dot notation.

(Ex)
props.name

• JSX allows embadding javascript inside{}, so we use write

{props.name}

Why dot(.) use:

• JS the dot(.) is used to acess object properties

(Ex)

let person={firstName:"vadivu",age:25};
console.log(person.firstName);