React Dev tools show my Component as Unknown

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 => <div>Hello</div>)
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 => <div>Hello</div>
export default React.memo(MyComponent)

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;