Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Component definition is missing display name for forwardRef

Tags:

reactjs

I was following this tutorial on using React.forwardRef, where make this component:

import React from "react";

const Search = React.forwardRef<HTMLInputElement>((props, ref) => {
  return <input ref={ref} type="search" />;
});

export default Search;

However, running my app, the component causes the following error:

Component definition is missing display name  react/display-name

Based on this question, I thought I might do something like this:

const Search = MySearch = React.forwardRef<HTMLInputElement>((props, ref) => {
  return <input ref={ref} type="search" />;
});

export default Search;

But this did not fix the problem either.

So then, how can I give my component a display name?

like image 678
ANimator120 Avatar asked Jun 15 '21 20:06

ANimator120


People also ask

How do you use forwardRef in functional components?

const Input = forwardRef((props, ref) => { // Here goes the content of our component }); In the returned JSX code, we now need to pass the ref we receive in the function to the correct HTML component, which in our case is the input element. const Input = forwardRef((props, ref) => { return ( <input ref={ref} {...

What does forwardRef mean?

The forwardRef method in React allows parent components to move down (or “forward”) refs to their children. ForwardRef gives a child component a reference to a DOM entity created by its parent component in React. This helps the child to read and modify the element from any location where it is used.

What is displayName in react?

displayName. The displayName string is used in debugging messages. Usually, you don't need to set it explicitly because it's inferred from the name of the function or class that defines the component.


1 Answers

The Component definition is missing display name react/display-name message is likely coming from a tool like eslint.

It is a linting rule that exists in order to help you follow style guides and/or conventions regarding what is considered good practice when writing React code.

That particular rule in eslint is explained in further details here: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md

From that page you can also find why it exists and what the displayName property on React Components is good for, namely to help when debugging, since it means that it will print your component's displayName property to the console instead of just input.

Also, from that link, you can find that when you are using function components, you can address that by setting the displayName property on the component. This should probably help you:

import React from "react";

const Search = React.forwardRef<HTMLInputElement>((props, ref) => {
  return <input ref={ref} type="search" />;
});
Search.displayName = "Search";

export default Search;

Another option is to just disable that particular linter, using a comment with // eslint-disable-next-line react/display-name or similar just above the declaration of your component.

That would however mean that if you were to need to debug your app, this component would simply be called input instead of Search, which might make the debugging a bit harder.

like image 185
Frost Avatar answered Sep 16 '22 15:09

Frost