Reactjs doesn't display(or render) my page

Question

I'm new at this React and didn't fully understand the rendering.I created a react app with react-create-app and now developing a simple react component but can't display main page although when its perfectly compiled. I

Is it rendering my code?

Can anyone explain this?

App.js file:

import { Button } from "react-bootstrap";
import Card from "react-bootstrap/Card";
import CardDeck from "react-bootstrap/CardGroup";
import { useEffect, useState } from "react";
import axios from "axios";

import "./App.css";

function App() {
  const [loggedIn, setLoggedIn] = useState(false);
  const [user, setUser] = useState(null);

  useEffect(() => {
    const token = new URLSearchParams(window.location.search).get(
      "access_token"
    );
    axios
    .get("http://localhost:8010/proxy/user", {
      headers: {
        Authorization: "token" + token,
      },
    })
    .then((res) => {
      setUser(res.data);
      setLoggedIn(true);
    })
    .catch((err) => {
      console.log("error" + err);
    });
  });


  return (
    <div className="App text-center container-fluid">
      {!loggedIn ? (
        <>
          <img
            className="mb-4"
            src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
            width={150}
            alt="gitMark"
          ></img>
          <h1 className="h3 mb-3 font-weight-normal">Sign in with GitHub</h1>
          <Button
            type="primary"
            className="btn"
            size="lg"
            href={
              "https://github.com/login/oauth/authorize?client_id=&...redirect_uri=http://localhost:8080/oauth/redirect"
            }
          ></Button>
        </>
      ) : (
        <>
          <h1> Welcome </h1>

          <CardDeck>
            {[...Array(3)].map((e, i) => (
              <Card style={{ maxWidth: "25%", margin: "auto" }}>
                <Card.Img variant="top" src={user.avatar.url} />
                <Card.Body>
                  <Card.Title> {user.name} </Card.Title>
                  <Card.Text> {user.bio} </Card.Text>
                  <Button
                    variant="primary"
                    target="_blank"
                    href={user.html_url}
                  >
                    GitHub Profile
                  </Button>
                </Card.Body>
              </Card>
            ))}
          </CardDeck>
        </>
      )}
    </div>
  );
}

export default App;

index.js file:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
        <div>hello</div>
    <App />
  </React.StrictMode>
);

reportWebVitals();

What's wrong with my code? I couldn't find it.

These are the errors:

Open the Browser Developer Tools and check for errors. When in doubt - post these errors here. Also: How are you trying to "render" the page? `npm run start` ? — madflow, Jan 03 '23 at 09:23
I start it with npm start (node index.js) command. I'm attaching the photo with the errors right away. @Salketer — barankibar, Jan 03 '23 at 10:42

score 0 · Answer 1 · answered Jan 03 '23 at 09:18

I noticed two things in your code.

Firstly you don't have a dependency array in your useEffect hook.

Secondly if you want to do async operations in your useEffect like axios requests; you should move that code in another async function and call it in your useEffect hook or you should wrap your function with IIFE.

Something like this:

  useEffect(() => {
    (async () => {
      try {
        const token = new URLSearchParams(window.location.search).get(
          'access_token',
        );
        const {data} = await axios.get('http://localhost:8010/proxy/user', {
          headers: {
            Authorization: 'token' + token,
          },
        });
        setUser(data);
        setLoggedIn(true);
      } catch (error) {
        console.log('error' + error);
      }
    })();
  }, []);

I added an empty dependency array and wrap the code in useEffect with an IIFE.

I hope it helps, more info here:

How to call an async function inside a UseEffect() in React?

Reactjs doesn't display(or render) my page

1 Answers1