What Exactly Is a Prop, and What Does It Do?

In JavaScript frameworks, when we're building components, in order to make components dynamic — in other words, defined in a way that lets us use them over and over so we don't have to write repetitive code — we need to use props. A prop can be any kind of data: a string, boolean, array, object, or even a function.

In React, we most often need to send some data from the parent component to the child component, and we use props for that. So here's how it's sent:

const Parent = () => {
	const name = 'tarhche'
	return (
		<child name={name} />
	)
}
export default Parent

In the example above, to send the data, we used the name property as the key and the name variable as the value — the data that's going to be sent.
Now we can go to the child component and receive the sent props inside it:
 

const Child = (props) => {
	console.log(props.name)
	return (
	 <p>you are on the {props.name} website.</p>
	)
}
export default Child

Using props With Destructuring

To receive the sent props, we need to add the props object as a parameter, and then we can access the sent data — name, in this case — from inside the props object. Of course, instead of writing props, we can use JavaScript's destructuring feature and simplify the code as follows: 
 

const Child = ({name}) => {
	console.log(name)
	return (
	 <p>you are on the {name} website.<p>
	)
}
export default Child

 Summary 

• Props make a component reusable and prevent you from writing repetitive code.
• Props let a component behave appropriately under different conditions. For example, think of product cards in a shopping cart, each with its own specific content.
• Parent components can control child components' behavior and determine what output is shown in the child component. This control happens through Props in React.