Los propTypes deberían ser una función de advertencia en la consola al pasar un array de íconos.
Tengo el siguiente componente,
import React from 'react';
import PropTypes from 'prop-types';
import * as HIcons from '@heroicons/react/outline';
export default function Button({ type, variant, icon, label }) {
const { ...icons } = HIcons;
const TheIcon = icons[icon];
return (
<div>
<button type="{type}" classname="{['btn'," `btn--${variant}`].join('="" ')}="">
<theicon classname="w-4 h-4 mr-2"></theicon>
{label}
</button>
</div>
);
}
Button.propTypes = {
type: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
icon: PropTypes.oneOf(Object.keys(HIcons)),
variant: PropTypes.oneOf(['sm', 'md', 'lg'])
};
Button.defaultProps = {
type: 'button',
label: 'Submit',
icon: 'SaveIcon',
variant: 'md'
};
y tengo el siguiente archivo de historias para Storybook
import Button from '.';
import * as HIcons from '@heroicons/react/outline';
const { ...icons } = HIcons;
export default {
title: 'Components/Buttons',
component: Button,
argTypes: {
type: {
options: ['button', 'submit', 'reset'],
control: {
type: 'select'
}
},
icon: {
options: Object.keys(icons),
control: {
type: 'select'
}
}
}
};
const Template = (args) => <button {...args}=""></button>;
export const Small = Template.bind({});
Small.args = {
label: 'Small',
variant: 'sm',
icon: 'SaveIcon'
};
Según tengo entendido, estoy pasando todo correctamente, puedo cambiar los iconos y demás, sin embargo, obtengo el siguiente error en la consola
Advertencia: Failed prop type: Button: la propiedad `icon` es inválida; debe ser una función, normalmente del paquete `prop-types`, pero recibió `undefined`. Esto a menudo ocurre debido a errores tipográficos como `PropTypes.function` en lugar de `PropTypes.func`.
Cualquier ayuda para resolver esta advertencia sería genial, ya que soy nuevo en propTypes.
davy.ai
El problema se encuentra en la definición de “propTypes” de “Button”. La propiedad “icon” está definida como “PropTypes.oneOf[Object.keys(HIcons)]”, lo cual debería ser “PropTypes.oneOf(Object.keys(HIcons))”.
Las “propTypes” correctas para “Button” deberían ser:
Después de realizar este cambio, la advertencia debería desaparecer.