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-ac         


        

Answer 1

I realise the original question has been correctly answered already, but I just wanted to note a very similar issue you may encounter if using React.memo() or similar function. Consider the following code:

const MyComponent = React.memo(props => 
Hello
)
export default MyComponent

The component will still display as Anonymous in devtools and certain React error messages (e.g. prop-types validation).

Ensuring that the Component is defined before trying to memoise it resolves this issue, e.g:

const MyComponent = props => 
Hello
export default React.memo(MyComponent)