Enterprise App Development

Understanding Render Props in React

In React “props” is short for properties. In simple words, we can say, Render Props is a way to pass single values or objects containing a set of values to a component that should be used while rendering, on the fly.

I’ll demonstrate this principle using a JSX example:

How to Pass props to a component

The important feature of props is that they can be passed by a parent component to its child components. This allows us to create a component that can be customized with a new set of props every time we use it. Passing props to the component are quite straight forward and can be done like this:

const PropsDemo = (props) => {
    const { name } = props;
        return (
            <div>
                 <h1>Let's start with basic example of render props, {name}</h1>
            </div>
        );
}

In the above code snippet, we are passing a prop named “name” to the component named PropsDemo. This prop has value what you’ll give like any name(“HelloProp”). Let us now see how can we access these props.
We can access any props inside from the component’s class to which the props is passed. The props can be accessed as shown below:

class Demo extends Component {
    render() {
        return (
            <div>
                <PropsDemo name="Sriya pathak" />
            </div>
        )
    }
}

Output:

Props in the Class Component or Props in the Constructor

If your component has a constructor function, the props should always be passed to the constructor and also to the React.Component via the super() method.

Example:

class PropsDemo extends React.Component {
    constructor(props) {
      super(props);
    }
    render() {
      return <h2>Here is another way to pass props</h2>;
    }
  }
  
  ReactDOM.render(<PropsDemo model="Brand Name"/>, document.getElementById('root'));

Code reuse with props 

Props allow us to reuse more React code and avoid repeating itself. In the case of our example, you can reuse the same  component for many different names:

class Demo extends Component {
    render() {
        return (
            <div>
                <PropsDemo name="Sriya pathak" />
                <PropsDemo name= "Hey, you can pass here new value" />
                <PropsDemo name= "Hey Rama" />
            </div>
        )
    }
}

Output :

props.children — a special kind of a prop

Sometimes we don’t know if a component will need some additional data to render. This additional data can be injected into a component whenever we want by using props.children. This prop is always available and easily accessible.

Example:

class PropsDemo extends React.Component {
    constructor(props) {
      super(props);
    }
    render() {
        const {children} = this.props;
      return <h2>{children}</h2>;
    }
  }
  

Types of props required and default props

Sometimes we know what type of data we have to pass in our application. In the case of small applications, we probably won’t have any problems with the types of props. But larger applications are prone to errors and it would be good if we have some methods to check whether the structure of the props object is correct. That’s where PropTypes. It’s a feature that can verify if the declared type of props is valid. We can pass different types of information like integers, strings, arrays, etc. When an invalid value is provided for a prop, a warning will be shown in the JavaScript console. For performance reasons, propTypes is only checked in development mode.

Example:

import PropTypes from 'prop-types';

const PropsDemo = (props) => (
    <div>
     <p>{props.name}</p>
     <p>{props.age}</p>
     <p>{props.email}</p>
    </div>
   );
   PropsDemo.propTypes = {
    name: PropTypes.string,
    age: PropTypes.number,
    email: PropTypes.string.isReqired,
   };
   PropsDemo.defaultProps = {
    name: 'Satish',
    age: 35,
   
   };

See the Pen Basic example by Sriya Pathak (@SriPathak) on CodePen.

Facebook Comments

Get In Touch

hbspt.forms.create({ portalId: "5252078", formId: "92d01160-83bf-4add-b80e-6588168dac74" });

Ask Us Anything !

Do you have experience in building apps and software?

What technologies do you use to develop apps and software?

How do you guys handle off-shore projects?

What about post delivery support?