0

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.

1
  • ¿Qué es lo que tienes, un error o warning? ¿Cuál es este?
    – gugadev
    Commented el 22 jun. 2017 a las 13:13

1 respuesta 1

1

El error que tienes es porque tienes una P (mayúscula) en IssueRow.PropTypes.

Debes escribir la declaración de los PropTypes así:

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

Esto se debe a que PropTypes es el paquete que estás importando y propTypes es la propiedad de los tipos de datos de tu clase.

Hay otra forma de declarar los PropTypes (la cual uso yo) y es la siguiente:

Dentro de tu clase, antes del constructor:

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

¿Por qué no importas los paquetes de React y demás con la sintaxis de ES6?

Saludos.

1
  • 1
    Hey gracias, hacía tiempo que había hecho esta pregunta. En esos tiempos no estaba familiarizado con la sintaxis de ES6 al completo y desconocía los imports por eso no lo utilize, ya he solucionado el error de typo :) Commented el 21 jul. 2017 a las 18:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.