We learned about components and JSX, and now is the time to know more about PROPS in ReactJS.

WHAT ARE PROPS?

The first thing we need to understand about props is that they are properties of a component. It is just like the attributes of the HTML tags but we can give any value including arrays, functions, and objects. These are the information we give to the JSX tags. for eg

// In JSX 
function aImageButton(){
return(
<>
<button onClick={sayHello} className="button-1">ANKIT MISHRA</button>
//if we see here we will get to know that we are passing some information in a <button/> tag, such as onClick, className, etc. 
</>

HOW TO PASS PROPS IN THE COMPONENT

These are the two efficient ways of declaring or passing a prop

// INSIDE THE FUNCTION 
// REMEMBER TO PASS THEM IN A CURLY BRACES {};
function AankitNew({ age, name }) {
  return (
    <>
      <h1>Hello my name is {name}</h1>
      <h1>my age is {age}</h1>
    </>
  );
}

The other way is

function AankitNew(props) {
let name = props.name;
let age = props.age;
// defining the values of the props here...
  return (
    <>
      <h1>Hello my name is {name}</h1>
      <h1>my age is {age}</h1>
    </>
  );
}

PASSING PROPS

Now we will see how we are going to pass props from the parent component to child component.

In the above code, we can see that, in the component AankitNew() we passed two props name and age. When we used the same component in the main file we passed the value of the props that are name and age. The parent component App() and the child component AankitNew() works independently. You can alter the name in AankitNew() and in App(). Both are independent, this will be more clear by using a example, which is beautiful example shown in REACT.DEV website.

In the above example, we created a component containing an image and passed a prop size to it. We gave the width and height to an image and passed the prop to it. In the parent component, we passed a value of size in the parent i.e let size=400 and rendered two <ImageCart/> in it. In one we passed a value inside the <ImageCart/> and in one we passed a value of the parent component.

We can see here, the parent and child components are independent to what value we are giving to the size. So props help to think of the parent and the child component independently.

Like the above methods we can also specify values to the props, for example

you can see here we have specified the value of size in this component. So it's clear from here that we can specify specific values for the props. So if the child component is rendered without giving any value to the props, the default value which we specified is going to be passed.

PASSING JSX AS CHILDERN

Suppose you have a component that renders buttons. When you pass this component to another component you want that with the button it also renders some images. For this, you will pass a prop called {children} inside the button, so that you can render any other element inside that component. This will be more clear with the following example.

In this example we passed the children props inside the ImageCart component, and when we used it inside the App component, we also rendered a paragraph inside the ImageCart component.

A very important point to note from React.dev site

• Props are not always static! Props reflect a component’s data at any point in time, rather than only in the beginning.

• props are unchangeable. When a component needs to change its props (for example, in response to a user interaction or new data), it will have to “ask” its parent component to pass it different props—a new object! Its old props will then be cast aside.

THANK YOU FOR READING!!!!