Props

React 101 – Part 3: Introduction to React Props-A Comprehensive Guide to Building Modern User Interfaces

by

Props are used by React components to communicate with one another. Every parent component can communicate with its child components by providing them with props. Props may look like HTML attributes, but they can accept any JavaScript value, including objects, arrays, and functions.

Props are the data that is passed to a JSX tag. Some of the props you may send to an <img> include className, src, alt, width, and height:

function Avatar() {
  return (
    <img
      className="hero"
      src="./img/new.jpg"
      alt="hero img"
      width={100}
      height={100}
    />
  );
}

export default function heroSection() {
  return (
    <Hero/>
  );
}

The properties that can be passed to an <img> tag are predefined (ReactDOM adheres to the HTML standard). However, you can customize your own components, such as <Hero>, by passing any props to them. This is how!

How to Pass Props to a Component

In Step 1, the heroSection component does not give any props to the child component, Hero.

export default function heroSection() {
  return (
    <Hero/>
  );
}

In step 2. This is how we pass props to Hero. In here example we will pass props which is object called image.

export default function heroSection() {
  return (
    <Hero
      image={{ name: 'Hero 1', imageId: '2vi6lJ3' }}
    />
  );
}

So we passed props to the component and the next step we are going to read props which are inside of the child component

How to Read Props in a Child Component

We can read passed props from the Parent component to child component by listing their names inside ‘( { } ) ‘ after the function Hero.

function Hero({ image }) {
  
}

here you can modify or add some logics to render the component.

import { heroImg } from './img/hero';

function Hero({ image }) {
  return (
    <img
      className="hero"
      src={heroImg (image)}
      alt={image.name}
    />
  );
}

export default function HeroSection() {
  return (
    <div>
      <Hero
        image={{ 
          name: 'Hero pic 1', 
          imageId: 'oluPev1'
        }}
      />
      <Hero
        image={{
          name: 'Hero pic 2', 
          imageId: 'lPX70pd'
        }}
      />
    </div>
  );
}

Props allow you to consider parent and child components independently.

Here is a again a props object

function Hero(props) {
         let image = props.image;
}

Above syntax is called “destructuring”. Learn more about “destructuring”

How to Set a Default Value for a Props

Here let’s think we had props called size. I’m giving 500 as default value.

function Hero({ size = 500 }) {
  // ...
}

Now, If Hero image={…} /> is rendered without a size prop, the size is set to 500.

When Using Default Props

  • According to above example, if size prop is missing then the default props will be used
  • And also if size passed undefined, like this size = {undefined} then also default props will be used

When Default Props Will Not Use?

  • When props assigned to null. according to here example “size={ null }”
  • When props assigned to zero. according to here example ” size = { 0 }”

How to Pass JSX as Children

<div>
      <Hero />
</div>

Hero I’m going to show this to you using an example.

When you stack material within a JSX element, the parent component receives that content in the ‘children‘ prop. The Card component, for example, will receive a children prop set to “<Hero />” and render it in a wrapper div:

App.js

import Images from './images.js';

function Card({ children }) {
  return (
    <div className="galleryCard">
      {children}
    </div>
  );
}

export default function Gallery() {
  return (
    <Card>
      <Images 
        size={50}
        image={{ 
          name: 'Sport Meet Pic1',
          imageId: 'olkPwn3'
        }}
      />
    </Card>
  );
}

images.js

import { imgUrl } from './utils.js';

export default function Gallery({ image, size }) {
  return (
    <img
      className="galleryCard"
      src={imgUrl (image)}
      alt={image.name}
      width={size}
      height={size}
    />
  );
}

utils.js

export function getImageUrl(image, size = 'siz') {
return (
           'https://gdrive.com/u/sfsfergg' +
               person.imageId +
               size +
               '.png'
          );
}

Ok Tech Geeks.. That’s it about React Props. We will meet with next React tutorial!

Stay Tuned !

Learn about React Component easily from Here

Leave a Comment