reactjs - React Dev tools show my Component as Unknown

Question

I have the following simple component:

import React from 'react'
import '../css.scss'

export default (props) => {
  let activeClass = props.out ? 'is-active' : ''
  return (
    <div className='hamburgerWrapper'>
      <button className={'hamburger hamburger--htla ' + activeClass}>
        <span />
      </button>
    </div>
  )
}

When I look for it in the react dev tools, I see:

Is this because I need to extend React component? Do I need to create this as a variable and do so?

question from:https://stackoverflow.com/questions/43458971/react-dev-tools-show-my-component-as-unknown

Answer 1

This happens when you export an anonymous function as your component. If you name the function (component) and then export it, it will show up in the React Dev Tools properly.

const MyComponent = (props) => {}
export default MyComponent;