krishna kakade

Posted on Mar 18, 2020

propTypes use in react and some ways to avoid 😫🔧 Errors

#react #javascript #webdev #codenewbie

import React,{Component} from  'react';
import propTypes from 'prop-types';
class TodoItem extends Component{
  render(){
      return(
<div>
<p>{this.props.todo.title}</p>

</div>
      )
  }
}

//proptypes used for what type of data need to be render out there in your code🔽🕶
TodoItem.propTypes={
    todo:propTypes.object.isRequired
}

export default TodoItem;

Mostly propTypes used to for rendering correct data means when you have to render number/object/array at that particular instance of code then you can do that thing by using propTypes. and that's all i know. and most important below🔽🔧 and if you have something more then please comment🔽

Mostlyall developers including big youtubers

they use this&done mistake👉 import PropTypes from 'prop-types';
but for avoiding the errors we have to use 🔽

import propTypes from 'prop-types';

use propTypes and find issue related this hereClickMe🕶

Stay safe/clean God bless you all
follow Me On twitter

Top comments (5)

Scott Wagner • Mar 18 '20 • Edited

hey, that issue mentioned on github is actually due to the way that the proptypes are added to the component, it's not an issue with the import.

this is good:

TodoItem.propTypes = {
  // whatever proptypes
}

this is not:

TodoItem.PropTypes = {
    // whatever proptypes
}

Kyle Johnson • Mar 20 '20 • Edited

Really nice to help people out here with the post :), but just to avoid confusion here, Scott is correct.

The article states the problem is with

import propTypes from 'prop-types';

This is not the case. the problem was simply React components expose a property propTypes, not PropTypes. For example, one could still write:

import PropTypes from 'prop-types';
...
MyComponent.propTypes ={
 mySuperProp: PropTypes.string.isRequired.
}

That part doesn't matter as you can declare whatever variable name you wish here.

Aleksandr Hovhannisyan • Mar 20 '20

Laughs in TypeScript :)

Francesco Ciulla • Mar 19 '20

nice article thanks :)

krishna kakade • Mar 19 '20

welcome brother❤🕶 looking forward for more articles

DEV Community

propTypes use in react and some ways to avoid 😫🔧 Errors

Mostlyall developers including big youtubers

Top comments (5)

Read next

How to build a Liquidity Pool Smart Contract Using ERC-4626

A Complete Guide to Build a Documentation Site with Astro Starlight

How to build a Lottery App with Solidity, Chainlink VRF V2.5 and React.js(Vite)

From 2500 to Top 10! Our Team Advances to the Grand Finale of Tata InnoVent 2024!