DEV Community

krishna kakade
krishna kakade

Posted on

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;
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

use propTypes and find issue related this hereClickMe🕶

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

Top comments (5)

Collapse
 
nbbdog11 profile image
Scott Wagner • • 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
}
Collapse
 
kylessg profile image
Kyle Johnson • • 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.

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan •

Laughs in TypeScript :)

Collapse
 
francescoxx profile image
Francesco Ciulla •

nice article thanks :)

Collapse
 
krishnakakade profile image
krishna kakade •

welcome brother❤🕶 looking forward for more articles

Read next

whiskeygerman profile image

Web canvas with generative neural networks with elements of visual programming.

German Whiskey -

siisee11 profile image

Langgraph - Human In the Loop

Jaeyoun Nam -

chintanonweb profile image

Step-by-Step Guide to Using React Components as Props Like a Pro

chintanonweb -

codewith_ili profile image

How to Run MongoDB in Docker

Ili Aliaj -