3

I'm new to React and i made a simple React app.

class App extends React.Component {
state = {
    counter: 0
}
render() {
    return (
      <div>
        <h1>Hello!</h1>
      </div>
    );
 }
}



ReactDOM.render(<App />, document.getElementById('root'))

Output in browser seems to be okay.(React Element has been rendered and it's visible on browser)- DOM elements has been created but in developer tools in Bookmark Components App is shown with red triangle and you cannot see a structure of component created, hovering on triangle showing message:"This component is not running in strict mode.." enter image description here

Should be rather something like that(my tutor screenshot)

enter image description here

I added strict mode to component in Visual studio code ide (no result):

   <React.StrictMode>
      <div>
        <h1>Hello!</h1>
      </div>
  </React.StrictMode>
MWO
  • 2,627
  • 2
  • 10
  • 25
Luke
  • 33
  • 1
  • 5

4 Answers4

2

You have to wrap it around your component causing the issue, not only around a div. There where you call your App component, probably from index.js?

  <React.StrictMode>
     <App />
  </React.StrictMode>

And remove all your filters from the settings to show the structure:

enter image description here

MWO
  • 2,627
  • 2
  • 10
  • 25
  • Thank you. That removed warning but I still can't see what is inside App in Components Bookmark(div and h1) – Luke Jan 07 '22 at 12:52
0

Hi use react developer Tools extension

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

Vijay
  • 275
  • 2
  • 11
0

Install react developer tools in your browser and enable it.

Here is a link for the tool for google chrome: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

enter image description here

Abhishek
  • 546
  • 5
  • 13
0

This question came up as a response to my query for the search "react component not showing structure." Hard reset with cache clear as referenced here: react-devtools : Timeout unable to inspect element did solve the problem temporarily as promised.

Today React recognized the issue and I got a prompt in dev tools which sent me here and solved my issue: https://github.com/facebook/react/blob/main/packages/react-devtools/README.md#the-react-tab-shows-no-components.

thisLinda
  • 65
  • 1
  • 9