Question 204809 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Contacts component not rendering

The contacts component isn’t rendering anything. I’ve provided the code for the contacts component and the app component. I reviewed all of the other components to make sure that everything is working as expected. So far the issue is only with the contacts component. I used the developer tools in the browser to see if there is any errors, but nothing there.

// Contacts.jsx
import React from "react";

const Contacts = () => {
  return (
    <form>
      <div className="mb-3">
        <label htmlFor="name" className="form-label">
          Name
        </label>
      </div>
    </form>
  );
};

export default Contacts;

// App.jsx
import { ChakraProvider } from "@chakra-ui/react";
import Contacts from "./components/Contacts";
import Navbar from "./components/Header";
import DashBoard from "./components/LandingSection";
import Projects from "./components/Projects";

import { Route, BrowserRouter as Router, Routes } from "react-router-dom";

function App() {
  return (
    <div>
      <ChakraProvider>
        <Router>
          <Navbar />
          <Routes>
            <Route path="/" element={<DashBoard />} />
            <Route path="/projects-section" element={<Projects />} />
            <Route path="/contacts-section" element={<Contacts />} />
          </Routes>
        </Router>
      </ChakraProvider>
    </div>
  );
}

export default App;
Tags:

2

Answers


  1. 0

    with the following code only Name gets displayed so check if its merging with navbar or if it is behind navbar . so It might be displaying but u r not able to see it. Try adding mt-24 to className like below

    <form>
          <div className="mb-3 mt-24">
            <label htmlFor="name" className="form-label">
              Name
            </label>
          </div>
        </form>
    Login or Signup to reply.
  2. 0

    Try only rendering contact page at a time because sometimes it get hidden due to another components too. So try with commenting the component or try by removing the components as below:

      <Router>
      <Contacts/>
      <Routes>
      </Routes>
    </Router>

    Try this. It may help you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search