11 - Props

In React world, the data passes from component to component through a mechanism called props. The receiving side can call it with any name as it's a simple JS object, but the industry standard way is to call it props.

Components need data for two important reasons:

• Show data: A component would need some data to show on the screen. For example - contact card. The left side of the card displayed a profile image, while the right side of the card displayed the contact details. A component can either get the data through an API call or from the parent. A component surely can't manufacture data on its own. It is not advisable to have all components make the API calls. Usually a parent component will make an API call and then pass relevant data around.

The parent component doesn't have to pass all the data to everyone. Depending on the need of the component, only relevant data gets passed. Consider the following diagram:

The User component fetches user profile through an API call. There are three child components that need a slice of the user data. The parent passes only the relevant data. The SocialData & PersonalData components don't get the profile picture because profile picture is no relevant for them.

• Conditional rendering: The other common use of props is to control the rendering. Based on some input values, some parts will be rendered or not rendered.

Continuing the same user profile example, the social data component will display Twitter details only if the twitter link is present in the received data. Same for Facebook & Instagram. For the profile pic component, it'll display some default image if the user doesn't have a picture in their profile.

Passing props

Props can be passed to a child component through simple name value pairs where name is any string (just like an HTML attribute), while the value could be anything from simple literals to JS objects. The value can be given directly or through a JS expression enclosed in {}.

App.js

import M from "./M";
import D from "./D";
import Y from "./Y";
import A from "./A";

function App() {
  const month = "May", day = "17";
  
  return (
    <div>
      <A month={month} day={day} year="2023" />
      <M month={month} />
      <D day={day} />
      <Y year="2023" />
    </div>
  );
}

export default App;

In the above code, the parent component App passes three attributes to A and 1 to M, D, and Y each. This is how a simple data is passed around. In the child components, the data comes inside a JS object, which is passed as the first argument to the function component. That input parameter is always called props (although you can call it anything you like).

// A.js

function A(props) {
  const m = props.month,
    d = props.day,
    y = props.year;
    
    return (
      <h1>{m}, {d}, {y}</h1>
   );
}

export default A;

// M.js

function M(props) {
  const m = props.month;

  return (
    <h1>{m}</h1>
  );
}

export default M;

// D.js

function D({ day }) {

  return (
    <h1>{day}</h1>
  );
}

export default D;

The props can also be passed as a JS object. The only thing uncomfortable will be two curly braces. The first set of curly braces is the enclosure of the JS expression. The second set of curly braces define the JS object.

// App.js

import A from "./A";

function App() {
  const month = "May", day = "17";
  
  return (
    <div>
      <A ts={{month, day, year: "2023"}}/>
    </div>
  );
}

export default App;

// A.js

function App(props) {
  const month = props.ts.month,
    day = props.ts.day,
    year = props.ts.year;

  return (
    <h1>{month}, {day}, {year}</h1>
  );
}

export default A;

The last use of prop is to conditionally render some parts of the component.

// App.js

import A from "./A";

function App() {
  const month = "May", day = "17";
  
  return (
    <div>
      <A ts={{month, day, year: "2023"}}/>
    </div>
  );
}

export default App;

// A.js

function App(props) {
  const month = props.ts.month,
    day = props.ts.day,
    year = props.ts.year;

  return (
    <h1>
      {month}, {day}
      {year !== "2023" && <span>, {year}</span> }
    </h1>
  );
}

export default A;

If the year is not 2023, then the year will be displayed.

That's all about props. There is nothing special about props. It's a simple way to pass the data around.

Passing URL param to Download

For the file.io app, the Download component needed the fileId which comes from the router params. In the last section, we were able to get the fileId from the router param. Now, we can pass the fileId to the Download component. Just to verify, we'll also print the fileId in the Download component.

The only line updated in App.js is:

<Download fileId={fileId} />;

In the Download component, the fileId can be accessed through props:

function Download(props) {
  return <h1>Download: {props.fileId}</h1>;
}

export default Download;

--

That's all about passing props. There is nothing special in passing them. The special part is in using them. In the next section, we'll learn about the third foundation of React: state. After all, there is a reason why React is called React. You'll find it out in the next section.