es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

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.

Tags:  , , ,

Answer

  1. Avatar for 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:

    Button.propTypes = {
      type: PropTypes.string.isRequired,
      label: PropTypes.string.isRequired,
      icon: PropTypes.oneOf(Object.keys(HIcons)),
      variant: PropTypes.oneOf(['sm', 'md', 'lg'])
    };
    

    Después de realizar este cambio, la advertencia debería desaparecer.

Comments are closed.