I am learning react-hooks, I created a series of state variables using useState
, when trying to debug and see its value I find that React Developer Tool does not show the name assigned to the state variable but the text State, this is inconvenient as it is not possible to identify from the beginning which variable is the one that is tried to debug
Update 1
This is the current source code
import React, { useState, useEffect, Fragment } from "react";
function Main() {
const [data, setData] = useState({ hits: [] });
const [query, setQuery] = useState("redux");
const [url, setUrl] = useState(
"https://hn.algolia.com/api/v1/search?query=redux"
);
const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false);
useEffect(() => {
const fetchData = async () => {
setIsError(false);
setIsLoading(true);
try {
const response = await fetch(url);
const json = await response.json();
setData(json);
} catch (e) {
setIsError(true);
}
setIsLoading(false);
};
fetchData();
}, [url]);
return (
<Fragment>
<form
onSubmit={event => {
setUrl(`http://hn.algolia.com/api/v1/search?query=${query}`);
event.preventDefault();
}}
>
<input value={query} onChange={event => setQuery(event.target.value)} />
<button type="submit">Search</button>
</form>
{isError && <div>Something went wrong ...</div>}
{isLoading ? (
<div>Loading...</div>
) : (
<ul>
{data.hits.map(item => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>
))}
</ul>
)}
</Fragment>
);
}
export default Main;
I am getting this in React Developer tool
Updated 2
I am using Firefox 68
Is it possible that React Developer Tool shows the name of state variables created using useState
?
Access React components and state from the console Select a component in React DevTools and pop open the console (hitting the Esc key lets you see both at once). Type in $r and you'll have access to the instance of that React component from the console.
useState is a Hook (function) that allows you to have state variables in functional components. You pass the initial state to this function and it returns a variable with the current state value (not necessarily the initial state) and another function to update this value.
The useState() is a Hook that allows you to have state variables in functional components . so basically useState is the ability to encapsulate local state in a functional component.
The React useState Hook allows us to track state in a function component. State generally refers to data or properties that need to be tracking in an application.
See this issue:
https://github.com/facebook/react-devtools/issues/1215#issuecomment-479937560
That's the normal behavior for the dev tool when using hooks.
I asked the library author about it, cause I also would like it to show my state variable names. And that's what he said:
@cbdeveloper I haven't thought of a good way for DevTools to be able to display the variable name like you're asking. DevTools doesn't have a way to read your function's private variables, and changing the API to support passing in a display name would increase the size of component code. It also just doesn't seem necessary to me, more like a nice to have.
Anyway, this umbrella issue is not the best place to have discussions like this. If you feel strongly about it, I suggest opening a new issue.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With