# Function components cannot have string refs in React

This article will show you how to fix the error “Function components cannot have string refs” in React by using the useRef hook or the createRef() method. Let’s go into detail now.

## The reason why the error “Function components cannot have string refs” happens

Before we get to the fix, we need to know why this error occurs first. Let’s see the code below and find the exact reason for this error.

Code:

import React from 'react';

const App = () => {
return (
<div>
<h2>Function components cannot have string refs in React | LearnShareIT</h2>
<hr/>
<div ref={text}>This is the text content</div>
</div>
);
};

export default App;

Output:

When you add a ref to an element and have not created a ref hook to assign to the element, the compiler will not be able to define this and will give you an error.

## How to fix the error “Function components cannot have string refs” in React

### Using the useRef hook method

Essentially, useRef is like a “case” used to store the upsides of a component utilizing the .current characteristic. You are presumably acquainted with the ref as a method for getting to the DOM. React will change it.current property to the corresponding DOM node whenever you pass a ref object to it with the syntax “div ref = myRef />”. The program can obtain this ref if you define useRef() before using it in elements.

Code:

import React from 'react';
import { useEffect } from 'react';
import { useRef } from 'react';

const App = () => {
const text=useRef(null);
useEffect(() => {
console.log(text.current);
}, []);

return (
<div>
<h2>Function components cannot have string refs in React | LearnShareIT</h2>
<hr/>
<div ref={text}>This is the text content</div>
</div>
);
};

export default App;

Output:

So you can point to and get the div tag using useRef(), and the returned object will be a div element identical to the element it’s pointing at. You can use the current attribute with ref to do this and fix the ide error.

### Using the createRef() method

The underlying DOM element will be passed to createRef() as its current property. The ref object receives the bound instance of that component as its element current whenever the ref attribute is applied to a custom class element. However, you can only use this method with a class component. You will use the createRef method, as explained above. See the below code to understand how it works.

Code:

import React from "react";

class App extends React.Component {
constructor(props) {
super(props);
this.text = React.createRef();
}

render() {
return (
<div>
<h2>
Function components cannot have string refs in React | LearnShareIT
</h2>
<hr />
<div ref={this.text}>This is the text content</div>
</div>
);
}
}

export default App;

By doing this, we can also create a ref for the div tag and access it. The error will no longer appear but still can create refs for the element. I wish you success with the methods mentioned in the article.

## Summary

In summary, the article has told you why the error “Function components cannot have string refs” in React occurs and the solutions to fix it. However, if you use the useRef hook, it will be closer to this error. You can keep the original function component format.

Maybe you are interested: