Component Doesn't Show Up & React JS

Question

There is a problem about my compenent, that is it doesn't show up? It's a first I'm doing a website project and using JS and React, so I don't know really what is the deal... I am even trying to learn by copying codes from tutorials, I always had done it like this before, when I wanted to learn something. But there is not an error or something and yet, it doesn't show up when I run the project at all.

Here is...

App.js

import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import { CssBaseline, Container, Grid, AppBar, Toolbar, Typography, Button, IconButton } from "@material-ui/core";
import PenIcon from "@material-ui/icons/Create"
import { BrowserRouter as Router, Routes, Route, Navigate} from "react-router-dom";
import PostsList from "./components/PostsList";
import AddPostForm from "./components/AddPostForm";

. . .

 <Routes>
            <Route exact path="/posts" element={<PostsList/>}/>
          </Routes>

and

PostList.js

import React from 'react'

const PostsList = () => {
  return <div>PostsList</div>
};

export default PostsList;

Edit: I added the part I used PostsList to App.js And my problem solved when I exchange from "component" to "element" and add < /> sides of PostsList.

Could you please show us the complete code of App.js? You've imported a hell lot of things in App.js but the App component itself is missing. — Amit
– Amit, Commented May 13, 2022 at 6:50
Can you show me the render part of your App.js. Atleast the part where you're using the <PostsList /> component. — Pavan Aditya M S
– Pavan Aditya M S, Commented May 13, 2022 at 6:50
Considering you edit note, you were probably copying code using react router 5 while you have react router 6 installed — coglialoro
– coglialoro, Commented May 13, 2022 at 7:25
Yes, It seems that was the case and even I saw element thing and tried before, since it wasn't working in that way either, I was just hopeless. Then I saw they also used {< />} this, and it solved. — dkmz
– dkmz, Commented May 13, 2022 at 7:30

Pavan Aditya M S · Accepted Answer · 2022-05-13 07:19:54Z

1

Use it like,

<Route exact path="/posts" component={PostsList} />

or

<Route exact path="/posts">
   <PostsList/>
</Route>

answered May 13, 2022 at 7:19

Pavan Aditya M S

3773 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

todevv · Accepted Answer · 2022-05-13 06:54:26Z

0

You show us only the imports from you App.js file, but to render a component is not only import the file, but also write it between return()
Try to write in your App.js:

const App = () => {
    return(
        <div className="App">
            <PostLists />
        </div>
    )
}

answered May 13, 2022 at 6:54

todevv

7236 silver badges17 bronze badges

Comments

Parham Abolghasemi · Accepted Answer · 2022-05-13 07:06:47Z

0

that's because you just imported your components, you should display it in your App.js like below

const App = () => {
    return(
        <div className="App">
            <PostLists />
        </div>
    )
}

answered May 13, 2022 at 7:06

Parham Abolghasemi

1682 silver badges9 bronze badges

Collectives™ on Stack Overflow

Component Doesn't Show Up & React JS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related