09 Props - biswajitsundara/react GitHub Wiki

Props are arguments passed into React components.

props stands for properties.
React allows us to pass information to components using props
props helps in building reusable components
Data, Objects, functions anything can be passed as props
It's an object that stores the values of attributes of a tag and work similar as HTML attributes
Props are passed to the component in the same way how arguments are passed to functions
Props are read-only (immutable)

1. Single Property

Let's say we have a component to display employee name.

Now we can pass the employee name dynamically using props
So the same component can be reused and only data will change.

const EmployeeCard = (props) => {

    return (
        <h1>
          Employee Name: {props.name}
        </h1>
      );
}
 
export default EmployeeCard;

import EmployeeCard from "./EmployeeCard"

const Employee = () => {
  return (
    <div>
      <EmployeeCard name="Aishwarya" />
      <EmployeeCard name="Kajol" />
    </div>
  );
};

export default Employee;

2. Multiple Properties

We can pass multiple properties separated by space.

In the below example we are passing name & husband properties

const EmployeeCard = (props) => {
  return (
    <h1>
      Employee Name: {props.name} husband: {props.husband}
    </h1>
  );
};

export default EmployeeCard;

import EmployeeCard from "./EmployeeCard"

const Employee = () => {
  return (
    <div>
      <EmployeeCard name ="Aishwarya" husband = "Abhishek"/>
      <EmployeeCard name ="Kajol" husband = "Ajay" />
    </div>
  );
};

export default Employee;

3. Children Properties

Children props are used to render the content included between the opening and closing tags when invoking a component.

Properties that we are sure of them, that we can pass with a named argument/parameter.
Properties for which we don't have any clue / dynamic HTML content then children props should be used.
The children properties are passed between the opening & closing tags of the invoking component
Then props.children renders the passed content in the component.
If anything is passed then props.children renders that else renders nothing

import EmployeeCard from "./EmployeeCard"

const Employee = () => {
  return (
    <div>
      <EmployeeCard name="Aishwarya" husband="Abhishek" />
      <EmployeeCard name="Kajol" husband="Ajay">
        <button>More Details</button>
      </EmployeeCard>
      <EmployeeCard name="Katrina" husband="Vicky">
        <p>Katrina is recently married</p>
      </EmployeeCard>
    </div>
  );
};

export default Employee;

const EmployeeCard = (props) => {
  return (
    <div>
      <h1>
        Employee Name: {props.name} husband: {props.husband}
      </h1>
      {props.children}
    </div>
  );
};

export default EmployeeCard;

4. Special Rule

Props are immutable means the values can't be changed
This is not possible. The component will render the value that's passed from the component invocation, we can't change the value.

export const EmployeeCard = (props) => {
  props.name = 'Anushka' 
  return <h1>Employee {props.name}</h1>
}

5. Reusable

Let's say we have a component Link that has details on how to render link items.
Then we have the component LinkList where we will call the Link component multiple times with different data.

const Link = (props) => {
  return (
    <div>
      <a href="">
        <h3>{props.title}</h3>
      </a>
      <p>{props.content}</p>
    </div>
  );
};

export default Link;

import Link  from "./Link";

const LinkList = () => {
    return (
    <>
      <Link
        title="React  A JavaScript library for building user interfaces"
        content="React makes it painless to create interactive UIs."
      />
      <Link
        title="React Tutorial - W3Schools"
        content="React is a JavaScript library for building user interfaces."
      />
      <Link
        title="React (JavaScript library) - Wikipedia"
        content="React is a JavaScript library for building user interfaces based on UI components."
      />
    </>
  );
};

export default LinkList;

6. Refactoring

We can use destructuring concept of ES6 and extract the values.

const {title, content} = props;
And then use {title} instead of {props.title}

We can also write directly in the function argument

export const Link = ({title, content}) instead of export const Link = (props)