CODEWITHSUNDEEP
reactjs
KOla Kola
KOla Kola

Reputation: 1

How to pass a react component to another react component, using ReactComponent?

I have a generic button where I want to pass an icon as a component

 export const GenericButton = ({ name, type, iconType, text, primary }) => {
  return (
    <>
      <button
        className={primary ? 'genericButton_primary' : 'genericButton_secondary'}
        name={name}
        type={type}
      >
          <span className='genericButton_icon'>
            {iconType}
          </span>
        {text}
      </button>
    </>
  );
}

and here I have a parent in which I pass these components

import { ReactComponent as Google } from '../../common/g logo.svg';
import { ReactComponent as Fb } from '../../common/f logo.svg';

....

<GenericButton 
   name='gmail'
   type='button'
   text='Register with Google'
   iconType={<Google />}
  />
  <GenericButton 
    name='fb'
    type='button'
    text='Register with Facebook'
    iconType={<Fb />}
  />

As a result I get two buttons with the same icon, why?

Upvotes: 0

Views: 43

Answers (1)

kooskoos
kooskoos

Reputation: 4879

import { ReactComponent as Google } from '../../common/g logo.svg';
import { ReactComponent as Fb } from '../../common/f logo.svg';

....

<GenericButton 
   name='gmail'
   type='button'
   text='Register with Google'
   iconType={Google}
  />
  <GenericButton 
    name='fb'
    type='button'
    text='Register with Facebook'
    iconType={Fb}
  />


 export const GenericButton = ({ name, type, iconType, text, primary }) => {
  return (
    <>
      <button
        className={primary ? 'genericButton_primary' : 'genericButton_secondary'}
        name={name}
        type={type}
      >
          <span className='genericButton_icon'>
            <iconType />
          </span>
        {text}
      </button>
    </>
  );
}

Upvotes: 2

Related Questions