0

[The code[

import logo from './logo.svg';
import './App.css';
import React, { Component, createContext, useState } from 'react';
import ReactDOM from 'react-dom'

class App extends Component {
    state = {
        players: []
    };

    async componentDidMount() {
        const response = await fetch('http://localhost:8080/all');
        const body = await response.json();
        this.setState({ players: body });
    }

    render() {
        const { players } = this.state;
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <div className="App-intro">
                        <h2>Players</h2>
                        {players.map(player =>
                            <div key={player.id}>
                                {player.name} ({player.foot})
                            </div>
                        )}
                    </div>
                </header>
            </div>
        );
    }
}
export default App;

]

The output on the site being fetched from is just json objects. I am not sure why nothing is outputting on the react app. I am very new to react and really don't know what I am doing.

Website being fetched from

Current Output

Icy
  • 17
  • 4
  • Just before the `this.setState({ players: body });` add a `console.log(body);` or a `debugger;` to check what you really got in this object if it is not undefined/empty and it is an array, also, check the browser's console itself if there is any errors, like CORS or anything else. The component itself looks ok. – Sergey Sosunov Oct 07 '22 at 14:43
  • @SergeySosunov I actually did to use console.log and I know this sounds really dumb but I dont know where to find it. I am using visual studio code and tried checking the terminal view, output view etc but couldn't find anything even when I made the console.log output a normal string. I checked the browser console and it actually is giving an error you were right. It is saying the following errors: – Icy Oct 07 '22 at 21:52
  • @SergeySosunov Access to fetch at 'http://localhost:8080/all' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. – Icy Oct 07 '22 at 21:52
  • Failed to load resource: net::ERR_FAILED and one more thats too long to paste but basically just says that the fetch could not happen I think all are due to the first one – Icy Oct 07 '22 at 21:54
  • Hehe, and that is a very different story and different question, so you should take a look at what CORS is, and you have 2 ways of solving that, 1) read how to configure CORS on your backend (you will have to do that in deployment anyway) and 2) configure CORS proxy for react development server, which will help you at the beginning. You can take a look at my [answer](https://stackoverflow.com/a/73459204/5767872) for some details if you want or google :) – Sergey Sosunov Oct 07 '22 at 21:57

0 Answers0