reactjsmemo

How set displayName to a React stateless component with memo?

This is a exemple the implementation of the stateless component:

import React, { memo } from 'react';

const Create = memo(props => {
    return <div id={props.id}>CREATE TEST</div>;
});

Create.displayName = "Create";

export default Create;

In React Developer Tools on Chrome is displayed like a Anonymous component (highlighted line):

enter image description here

Solution

  • You can use Object.assign:

    const Create = memo(
  Object.assign(props => {
    return <div id={props.id}>CREATE TEST</div>;
  }, { displayName: 'Create' } )
)

    You can also look at this issue, you may use any workaround solutions if above solution isn't helpful for you.