Props in a ReactJS application – a key fundamental

  • Software
  • 3 min read
reactjs logo emblem with black background

PROPS (Immutable) – Short for PROPERTIES


What’s props?

Props is short-hand for properties and are read-only. Props are immutable: data that cannot be changed throughout the react lifecycle. So now that we’ve got that out the way we can focus on what exactly is involved with props. Props is implemented in a React application for component communication. The important bit about props is that data will be sent in a uni-directional way. What I mean by uni-directional, is that data flows from the parent to the child component. 


Props have many types

Prop types are basically validators; validating the many types of data stored. Here are some basic types;

  • PropTypes.bool: The prop should be a Boolean
  • PropTypes.string: The prop should be a string
  • PropTypes.func: The prop should be a function
  • PropTypes.array: The prop should be an array
  • PropTypes.object: The prop should be an object
  • PropTypes.symbol: The prop should be a symbol
  • PropTypes.any: The prop can be of any data type
  • PropTypes.number: The prop should be a number

Defining prop types will require you to import a utility package in your react-component:

import PropTypes from ‘prop-types’;

In your react component you’ll have to configure these prop-types; below is an example of how to do that:

ComponentName.propTypes = {
  FullName: PropTypes.any.isRequired,
  isOlderThan18: PropTypes.bool,
  numberProp: PropTypes.number,
  stringProp: PropTypes.string,
  GetUsersProfile: PropTypes.func
}

Above where I’ve defined some prop types; I used isRequired on the FullName prop. The PropTypes without the isRequired, allow the prop to be optional. However, you can chain isRequired to any prop to ensure that a warning is shown: whenever the prop is not provided.


What’s the use for props?

So that you can re-use code and avoid repeating yourself. See below where I’ve written some code to illustrate how you can re-use code:

function App() {
  return (
    <div>
      <SayHello name='Bilaal' />
    </div>
  );
}

function SayHello(props) {
  return <p>Hello {props.name}</p>;
}

However, using only props in react does not mean your application is dynamic: dynamic apps can respond to user interactions and render accordingly. A dynamic application generates views/data in real-time, as per the request. Social media web applications are very good examples of Dynamic Web Applications.

So in order to make your app dynamic, state will need to come into play, because state is mutable. I’ll talk more about state in my next blog post.


In regards to this blog post please check-out the official ReactJS documentation: https://reactjs.org/docs/jsx-in-depth.html#props-in-jsx


I’ve also written a blog post about React’s lifecycle methods and how you can use these methods to your advantage: https://www.bilaalsblog.com/react-js-lifecycle-methods-both-common-uncommon/


Leave a Reply

Your email address will not be published. Required fields are marked *