Lo primero, ya había usado el paquete de prop-types antes para validar argumentos en componentes de React, pero en un proyecto en específico no se porque no me esta funcionando y lo tengo configurado como siempre. Uso WebPack para el bundle y el servidor de pruebas (webpack-dev-server)
Esta es mi cabecera:
const React = require('react');
const ReactDOM = require('react-dom');
const PropTypes = require('prop-types');
Y aqui el componente padre, el hijo y los 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
};
Lo raro es que no obtengo ningún error en consola y me renderiza correctamente la tabla, pero en el momento que en el atributo "id" le paso un string en vez de un numero no me salta el warning del PropTypes.