React JS Page When adding component - but no errors?

Question

When I add my Navigation component to my App.js file the entire site is blank. However, when I add my other components like my Header the page works completely fine. Am I missing something? There are no bugs or errors that are showing up either which is very confusing.


import { useState } from 'react'
import Navigation from './components/Navigation'
import Header from './components/Header';
import Collection from './components/Collection';



function App() {
  const [count, setCount] = useState(0)

  return (
    <div>
     <Navigation />
      <Header />
      <Collection />
    </div>
  )
}

export default App

import { useState } from "react";
import logo from "../icons/logo.svg";
import CSS from "../styles/Navigation.css";
import hamburger from "../icons/icon-hamburger.svg";
import hamburgerClose from "../icons/icon-close.svg";
import { MobileMenu } from "../components/MobileMenu";

function navigation() {
  
  state = { clicked: false }

  handleClick = () => {
    this.setState({ clicked: !this.state.clicked })
  }

  return (
    <>
      <div className="navigation">
        <img className="logo" src={logo} />

        <button className="hamburger" onClick={this.handleClick}>

        <img className={this.state.clicked ? {hamburger} : {hamburgerClose}}/>
        </button>

        <div className="navigation-menu">
          <ul>
            {MobileMenu.map((item, index) => {
              return (
                <li key={index}>
                  <a className={item.className} href={item.url}>
                    {item.title}
                  </a>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </>
  );
}

export default navigation;

Amanullha Zoha Amanullha Zoha · Accepted Answer · 2022-07-28T21:43:57

The state could only be used in class components. Using hooks, you can apply state to functional components too. Below code example

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

React JS Page When adding component - but no errors?

1 Answers