PropTypes in React, it's not working

Question

PropTypes in React, it's not working

Navigation

#1 by (1 votes)

0

First, I had already used the prop-types package before to validate arguments in React components, but in a project in I do not know why it is not working and I have it set as usual. Use WebPack for the bundle and the test server (webpack-dev-server)

This is my header:

const React = require('react');
const ReactDOM = require('react-dom');
const PropTypes = require('prop-types');

And here the parent component, the child and the PropTypes:

    class IssueTable extends React.Component {
  render() {
    const borderedStyle = {border: "1px solid blue", padding: 6};

    return (
      <table style={{borderCollapse: "collapse"}}>
       <thead>
         <tr>
           <th style={borderedStyle}>Id</th>
            <th style={borderedStyle}>Title</th>
         </tr>
       </thead>
       <tbody>
         <IssueRow issue_id={1}
                   issue_title="Error in console" />
         <IssueRow issue_id={2}
                   issue_title="Error in console 2" />
       </tbody>
      </table>
    )
  }
}


class IssueRow extends React.Component {
  render() {
    const borderedStyle = {border: "1px solid red", padding: 4};
    return (
      <tr>
        <td style={borderedStyle}>{this.props.issue_id}</td>
        <td style={borderedStyle}>{this.props.issue_title}</td>
      </tr>
    )
  }
}

IssueRow.PropTypes =  {
    issue_id: PropTypes.number.isRequired,
    issue_title: PropTypes.string
};

The weird thing is that I do not get any errors in the console and I render the table correctly, but the moment the attribute "id" passes a string instead of a number, I do not miss the warning of the PropTypes.

javascript reactjs react webpack

asked by RomeroBinary 22.06.2017 в 14:16

source

1 answer

Problem sending mail with PHP Can a result generated in PHP be displayed in an HTML?

score 1 · Accepted Answer

The error you have is because you have a P (upper case) in IssueRow.PropTypes .

You must write the PropTypes declaration like this:

IssueRow.propTypes =  {
    issue_id: PropTypes.number.isRequired,
    issue_title: PropTypes.string
};

This is because PropTypes is the package you are importing and propTypes is the property of the data types of your class.

There is another way to declare the PropTypes (which I use) and it is as follows:

Inside your class, before the constructor:

static propTypes =  {
  issue_id: PropTypes.number.isRequired,
  issue_title: PropTypes.string
}

Why do not you import the React packages and others with the ES6 syntax?

Greetings.