React Proptype Array Con Forma

PropTypes.arrayOf(PropTypes.shape(...)) describe un array cuyos elementos son objetos con campos específicos. El paquete prop-types comprueba este contrato del componente durante el desarrollo y puede mostrar una advertencia si las props recibidas no lo cumplen.

Qué valida PropTypes

PropTypes declara los tipos y la estructura de los objetos que espera un componente. Ayuda a documentar la interfaz del componente y permite detectar discrepancias durante el desarrollo. Estas comprobaciones generan advertencias en la consola; no impiden que el componente se renderice ni validan datos en producción.

Validar un array de objetos con PropTypes

Instala el paquete prop-types en tu proyecto de React. En el módulo del componente, impórtalo con import PropTypes from 'prop-types' y declara items: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string.isRequired, value: PropTypes.number.isRequired })).isRequired. Así se aplica la forma del objeto a cada elemento. El breve ejemplo de JavaScript que aparece a continuación muestra los mismos datos pasando por un renderizador de listas; funciona por sí solo, mientras que la declaración de PropTypes corresponde al módulo del componente de React.

const items = [
  { name: 'Ada', value: 7 },
  { name: 'Lin', value: 9 },
];

function renderItems(items) {
  return `<ul>${items.map((item) => `<li>${item.name}: ${item.value}</li>`).join('')}</ul>`;
}

console.log(renderItems(items));

<ul><li>Ada: 7</li><li>Lin: 9</li></ul>

En el componente de React, usa la prop items con ese mismo array y renderiza cada entrada con items.map(...); asigna una key estable a cada elemento renderizado. Los valores de muestra coinciden con los campos declarados, por lo que el ejemplo muestra el contenido esperado de la lista.

Cómo hacer obligatorios los campos y entender las advertencias

En la declaración, .isRequired en items significa que se debe proporcionar esa prop. El mismo modificador en name y value indica que se espera que cada objeto incluya esos campos con los tipos declarados. Si un campo puede omitirse, quita .isRequired de ese campo; los demás campos declarados seguirán comprobándose. Un objeto con value: '7' en lugar de un número no coincide con la forma, así que las comprobaciones de React durante el desarrollo muestran una advertencia en la consola. La advertencia no convierte la cadena, rechaza la prop ni impide el renderizado. Si la aplicación depende de datos externos o de producción, valídalos por separado.

Preguntas frecuentes

¿PropTypes valida todos los elementos de un array?

Sí. PropTypes.arrayOf aplica su validador a cada elemento. Al combinarlo con PropTypes.shape, comprueba los campos especificados en cada objeto.

¿PropTypes.shape valida un array por sí solo?

No. PropTypes.shape describe los campos de un objeto. Usa PropTypes.arrayOf(PropTypes.shape(...)) para validar un array de objetos.

¿PropTypes es obligatorio en React?

No. Son comprobaciones opcionales en tiempo de ejecución que pueden documentar las props y mostrar advertencias durante el desarrollo. No sustituyen los tipos estáticos ni la validación de datos en los límites de la aplicación.