0

Trying to render the component but getting an error message.

The below code runs correctly

function InputOption(Icon, title, color) {
    return(  <div className='inputOption'>
        </div>
  )
}

export default InputOption

As soon as I start calling the props it flags an error.

function InputOption(Icon, title, color) {
    return( <div className='inputOption'>
        <Icon style={{color : color}}/>
        </div>
   )
}

export default InputOption

Reading online it might be something to do with Import/ Export but cant get my head around it.

3
  • What error do you get?
    – Anes
    Sep 2, 2021 at 13:02
  • @Anes 'Check the render method of 'InputOption' Sep 2, 2021 at 13:04
  • @Anes Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Sep 2, 2021 at 13:04

1 Answer 1

0

Use object destructuring to get the props :)

By default, a component gets one prop.
eg: function InputOption(props){...}

This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element. We call such components “function components” because they are literally JavaScript functions.

function InputOption({Icon, title, color}){...}

By destructuring, you're can get all the "attributes" of the props object.


EDIT

Please provide more information (how do you actually call the InputOption component and about the Icon component)

Check this sandbox

1
  • Please provide more information about the Icon component Sep 2, 2021 at 13:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.