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:
- React Hook ‘useEffect’ is called in function that is neither a React function component nor a custom React Hook function
- Expected an assignment or function call and instead saw an expression
Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.
Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs