Props in React

Learnings about Props in React

Props (short for "properties") are a fundamental concept in React that allows you to pass data from parent components to child components. Here’s a summary of the key points:

Key Concepts:

1. Definition:

   • Props are inputs to a React component that are passed from a parent component to a child component. They are used to pass data and event handlers down the component tree.

2. Read-Only:

   • Props are read-only, meaning they cannot be modified by the child component. This ensures that data flows in one direction, from parent to child.

3. Passing Props:

   • Props are passed to components in the same way attributes are passed to HTML elements. You specify them as attributes on the component.

Example:

In my project, we have a Card component that receives username and btnText as props:

Parent Component (App.jsx):

import Card from './components/card';

function App() {
  return (
    <>
      <h1 className="bg-green-400 text-black p-4 rounded-xl mb-4">TailWind Test</h1>
      <Card username="Roman Reigns" btnText="View Wrestler" />
      <Card username="Seth Rollins" btnText="View Wrestler" />
    </>
  );
}

export default App;

• Explanation:

  • The App component passes username and btnText props to the Card component.

  • Each Card component receives different values for the username prop but the same value for the btnText prop.

  • We have also passed a default value for the btnText prop in case no value is passed.

Child Component (Card.jsx):

function Card({ username, btnText = "visit me" }) {
  console.log(username);
  return (
    <div className="relative h-[400px] w-[300px] rounded-md">
      <img
        src="https://images.unsplash.com/photo-1546961329-78bef0414d7c?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHx2ZWY2h8MTY5MjI0NTU0OHx8fHx8fDE2OTIzMjg0MjQ&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60"
        alt="AirMax Pro"
        className="z-0 h-full w-full rounded-md object-cover"
      />
      <div className="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent"></div>
      <div className="absolute bottom-4 left-4 text-left">
        <h1 className="text-lg font-semibold text-white">{username}</h1>
        <p className="mt-2 text-sm text-gray-300">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, debitis?
        </p>
        <button className="mt-2 inline-flex cursor-pointer items-center text-sm font-semibold text-white">
          {btnText}
        </button>
      </div>
    </div>
  );
}

export default Card;

• Explanation:

  • The Card component receives username and btnText as props.

  • These props are used to display the username and button text dynamically.

Important Points:

1. Dynamic Data Rendering:

   • Props allow components to render dynamic data. In this example, each Card component displays different usernames based on the props passed from the parent component.

2. Default Prop Values:

   • You can assign default values to props in the child component. For example, btnText has a default value of "visit me" if it is not provided by the parent component.

3. Reusability:

   • Using props makes components reusable. You can pass different data to the same component to render different outputs without changing the component itself.

Conclusion

Props are a powerful feature in React that enable components to be reusable and dynamic by allowing data to flow from parent to child components. They help maintain a unidirectional data flow, ensuring that the data remains consistent and predictable. By understanding and utilizing props, you can create more modular and maintainable React applications.