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" /> {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 cuentos
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} />; export const Small = Template.bind({}); Small.args = { label: 'Small', variant: 'sm', icon: 'SaveIcon' };Por lo que sé, estoy pasando todo correctamente, puedo cambiar los íconos y otras cosas, sin embargo, aparece el siguiente error de consola
Warning: Failed prop type: Button: prop type `icon` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.Cualquier ayuda para resolver esta advertencia sería genial ya que soy nuevo en propTypes.
cambia tus proptypes a esto
Button.propTypes = { type: PropTypes.string.isRequired, label: PropTypes.string.isRequired, icon: PropTypes.oneOf(Object.keys(HIcons)), variant: PropTypes.oneOf(['sm', 'md', 'lg']) };por error escribes este:
icon: PropTypes.oneOf[Object.keys(HIcons)],