Prop Types



PropTypes

 

PropTypes ensure that the right type of props is passed to a component — and, conversely, that the receiving component is receiving the right type of props.

 

Installing PropTypes

 

To make use of PropTypes, you have to add the package as a dependency to your application by running

 

npm install prop-types

 

in the command line.

 

Using PropTypes

 

To use PropTypes, we first have to import PropTypes from the prop-types package. For example:

 

import { PropTypes } from 'prop-types';

 

We can then define the propTypes property on a component. For example:

 

MyComponent.propTypes = {};

 

Here propTypes is an object which contains key-value pairs, where the key is the name of the prop and the value is the type of the prop that can be passed to the component.

 

Example:

 

import React from 'react';

import { PropTypes } from 'prop-types';

class Student extends React.Component {

 

  render() {

    return (

      <div>

        <p>Student Name: {this.props.name}</p>

        <p>Age: {this.props.age}</p>

      </div>

    );

  }

}

 

Student.propTypes = {

  name: PropTypes.string,

  age: PropTypes.number

};

 

export default Student;

 

Here PropTypes.string and PropTypes.number are prop validators which can be used to make sure props received are of the right type. PropTypes has lots of validators, some of the most common use prop validators are:

 

MyComponent.propTypes = {

  propArray: PropTypes.array,

  propBool: PropTypes.bool,

  propFunc: PropTypes.func,

  propNumber: PropTypes.number,

  propObject: PropTypes.object,

  propString: PropTypes.string,

}

 

Passing Wrong Props

 

When a wrong or invalid prop is passed to the component, a warning or an error is shown in the JavaScript Console. For example:

 

import React from 'react';

import Student from './Student';

 

class App extends React.Component {

  render() {

    return (

      <div>

        <Student name="Mark" age="24" />

      </div>

    );

  }

}

 

export default App;

 

Here the age prop is passed as a string to the Student component. So React will show a warning in the JavaScript console.

 

We can also enforce passing props by using isRequired:

 

Pen.propTypes = {

  title: PropTypes.string.isRequired,

  url: PropTypes.string.isRequired,

  author: PropTypes.string.isRequired

};

 

Requiring Single Child

 

We can use PropTypes.element to enforce that only a single child can be passed to a component as children. For example:

 

import React from 'react';

import { PropTypes } from 'prop-types';

 

class Container extends React.Component {

render() {

    return (

      <div>

        {this.props.children}

      </div>

    );

  }

}

 

Container.propTypes = {

  children: PropTypes.element

};

 

export default Container;

 

If we try to pass more than 1 child to the component, we will get an error. For example:

 

import React from 'react';

import Container from './Container';

import Student from './Student';

 

class App extends React.Component {

render() {

    return (

      <div>

        <Container>

          <Student name="Mark" age="24" />

          <Student name="Peter" age="25" />

        </Container>

      </div>

    );

  }

}

 

export default App;

 

Advance PropTypes Validators

 

Apart from specifying whether a prop should be an array or an object, we can use these prop validators to specify which type of array or object can be passed as a prop. For example:

 

PropTypes.arrayOf()

 

We can use PropTypes.arrayOf() to specify which type of array can be passed as a prop. For example:

 

import React from 'react';

import { PropTypes } from 'prop-types';

 

class Numbers extends React.Component {

 

  render() {

    const numbers = this.props.numbers.map(number => <p>{number}</p>);

    return (

      <div>

        {numbers}

      </div>

    );

  }

}

 

Numbers.propTypes = {

  numbers: PropTypes.arrayOf(PropTypes.number)

};

 

export default Numbers;

Here only an array of number type can be passed as a prop. If we try to pass wrong type of array as a prop, we’d get a warning. For example:

 

import React from 'react';

import Numbers from './Numbers';

 

class App extends React.Component {

render() {

    return (

      <div>

        <Numbers numbers={['1', '2', '3']} />

      </div>

    );

  }

}

 

export default App;

 

PropTypes.objectOf()

 

Similar to PropTypes.arrayOf() we can use PropTypes.objectOf() to specify which type of object can be passed as a prop to the component. For example:

 

NamesList.propTypes = {

  names: PropTypes.objectOf(PropTypes.string)

}

 

Here, the only object which contains string type values can be passed as a prop to the component.

Default Props:

 

CatComponent.defaultProps = {
    catName: "Sandy",
    eyeColor: "deepblue",
    age: "120"
}

Show quoted text

Comments

Post a Comment

Popular posts from this blog

Set Up Babel and Webpack

1. Create a project directory and cd in to that directory from the terminal 2. Initiate npm: npm init -y 3. Install webpack and webpack-cli npm i webpack --save-dev npm i webpack-cli --save-dev 4. Add webpack command under scripts in package.json "build": "webpack --mode production" 5. Install babel and babel loader npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev 6. Create .babelrc file and configure it { "presets": ["@babel/preset-env", "@babel/preset-react"] } To run / test async code .baelrc file should be: { "presets": [ [   "@babel/preset-env", { "targets": {   "node": "current" }   } ] ] } 7. Create webpack.config.js file and configure it const path = require('path'); module.exports = {   entry: path.resolve(__dirname, 'src'),   output: {         path: path.resolve(__dirnam...
Read more

Typescript Setup

Typescript: 1. Install typescript: npm install typescript 2. Command to convert a typescript file(*.ts) to a javascript file (*.js) tsc file_name.ts 3. Initialize npm npm init 4. Install lite-server npm install lite-server --save-dev 5. Add a script command to package.json to start the lite-server "start": "lite-server" 5. Initialize tsc tsc --init Add the following to the tsconfig.json if it doesn't exist already: "sourceMap": true, "exclude": [ "node_modules" ] 6. To compile all typescript files to javascript simply run: tsc 7. For Modules npm install --save-dev ts-loader webpack webpackconfig.js: const path = require('path'); module.exports = {   entry: './index.ts',   devtool: 'inline-source-map',   module: { rules: [   { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/   } ]   }, ...
Read more

Typescript + React Setup

Typescript and React setup steps: 1. npm init 2. npm install typescript -g (if it was not already installed globally) 3. npm install typescript (ts-loader needs a local version of typescript installed in the project) 4. tsc --init 5. Example tsconfig.json {   "compilerOptions": { "target": "es5",                        "jsx": "react", // Important                          } } 6. npm install --save react react-dom @types/react @types/react-dom 7. npm install --save-dev ts-loader webpack webpack-cli 8. Sample webpack.config.js const path = require('path'); module.exports = {   entry: './src/index.tsx',   devtool: 'inline-source-map',   module: { rules: [   { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/   } ]   },   resolve: { extensions: [ ".ts...
Read more