PropTypes in React

Let's see a best practice while displaying dynamic data to create a pleasing UI.

TL;DR

No more; Ever got a broken image or undefined text in your UI 😕 while fetching an API or a database with lot of data that you can't even scim through to find the missing ones, this get even worse if there is lot of nestesd data. So that we log out the errors in console and replace them with default props.

Prop Types

Before starting read the heading again as this is more of a self explanatory topic and most of you guessed it right.

As you may have known props(soul) that reside in component(body) is what gives it a uniqueness(life), as a broad concept of props and component the way its passed is all the same but the difference lies in how we want the component(body) to be by altering the props(soul) that's what gives a uniqueness(life).

Proptypes demand certain prop to be avail of certain kind, so when some props decline to posses them leaves a error on the console. Here a part of the problem is solved.

your_component_name.propTypes = {
  name: PropTypes.string.isRequired,
  image: PropTypes.object.isRequired,
  cost:PropTypes.number.isRequired,
};
Here PropTypes is imported from prop-types avail with the react boilerplate

Now whilst fetching the data and displaying them even if some ain't avail console just reflects them and we take certain actions.

Default Props

So far we have been able to log the error for missing piece of data that ain't solving our problem even now we have a broken image and undefined in our UI.

Here let's fill the gap of those kinks that our UI looks pleasing, so we pass on some defaultProps down to the component.

your_component_name.defaultProps = {
  name: 'default name',
  image: defaultImg,
  cost: 9.99,
};
Here defaultImg is a image import from anywhere from the repo

Nested Data

The above will solve the problem we have been following, but nested data may broke down while displaying.

Here's a example;

Consider the image we are destructuring from as props what if it's nested and got an url within and while displaying we have to get the url not the image as we have not set a default prop for image.url, so let's solve that here.

const your_component_name = ({ name, image, cost}) => {
  const url = image && image.url;  //only gets the image.url if image is avail
  return <article className='product'>
    <img src={url || defaultImg} alt="" /> //defaultImg is a fallback option
    <h4>{name}</h4>
    <p>{cost}/-</p>
  </article>
};

That's pretty much it, Our UI looks pleasing 🚀

Here's our component structure ready for being rendered.

Ourcomponent.js

import React from 'react';
import PropTypes from 'prop-types';
import defaultImg from './default-image.jpeg';

const Ourcomponent = ({ image, name, cost }) => {
  const url = image && image.url;
  return <article className='product'>
    <img src={url || defaultImg} alt="" />
    <h4>{name}</h4>
    <p>{cost}/-</p>
  </article>
};

Ourcomponent.propTypes = {
  image: PropTypes.object.isRequired,
  name: PropTypes.string.isRequired,
  cost: PropTypes.number.isRequired,
};
Ourcomponent.defaultProps = {
  image: defaultImg,
  name: 'default name',
  cost: 9.99,
};

export default Product;

---

Major Takeaway

PropTypes are best practice as well optimal while displaying dynamic data.

Let's connect 🔗

Catch me here 👇

---

Hope you all liked the post, share your impressions and queries below 🙌