Hey Developers🤓‼ In this Article I will explain what props and I will also clarify some of the most asked questions about them:

What are props?🧐

Props is short for properties and they are used to pass data between React components.

React’s data flow between components is uni-directional (from parent to child only). props stands for properties.

How do you pass data with props?

👉 Here is an example of how data can be passed by using props:

What I done that create folder components then inside create file ChildComoponts.js imported this file to App.js

App.js

import "./App.css";
import ChildComponents from "./components/ChildComponents";

function App() {
  return (
    <div className="App">
      <ChildComponents />
    </div>
  );
}

export default App;

ChildComponents.js-file we create card simple using jsx.

import React from "react";

function ChildComponents() {
  return (
    <div className="card">
      <img
        src="https://www.w3schools.com/howto/img_avatar.png"
        alt="Avatar"
        style={{ width: "10%" }}
      />
      <div className="container">
        <h4>
          <b>John Doe</b>
        </h4>
        <p>Architect & Engineer</p>
      </div>
    </div>
  );
}

export default ChildComponents;

Now what we gonna do we need to define/get some data from the parent component ( App.js) and assign it to a child component’s(ChildComponents.js) “prop” attribute.

import "./App.css";
import ChildComponents from "./components/ChildComponents";

function App() {
  return (
    <div className="App">
      <ChildComponents
        imgUrl={"https://www.w3schools.com/howto/img_avatar.png"}
        name={"Ronak"}
        jobdesc={"web developer"}
      />

      <ChildComponents
        imgUrl={"https://www.w3schools.com/howto/img_avatar.png"}
        name={"Ritesh"}
      />
    </div>
  );
}

export default App;

import React from "react";

function ChildComponents({ imgUrl, name, jobdesc = "content writer" }) {
  return (
    <div className="card">
      <img src={imgUrl} alt="Avatar" style={{ width: "10%" }} />
      <div className="container">
        <h4>
          <b>{name}</b>
        </h4>
        <p>{jobdesc}</p>
      </div>
    </div>
  );
}

export default ChildComponents;

Output:-

Important key points to remember

Props

Allows to pass data from one component to other components as an argument

Are immutable

Are read-only

Child component can access

Stateless components Can have props

Here is Source Code Link:-

Githup-Link

Thank you for your time !! Let's connect to learn and grow together. I hope it was helpful to you guys. Please share it with your network. Don’t forget to leave your comments below.