See more:

Javascript

CSS

HTML

ReactJS

I'm doing the REST Countries API with color theme switcher project from Frontend Mentor. I'm using React to do this but I'm getting errors in the console. This is the Country Component:

import react from "react";
import './contry.styles.css';

export const Country = (props) => (

);

export default Country;


This is the Country List component:

import react from "react";
import './countrylist.styles.css';
import { Country } from "./country.component";

export const CountryList = props => (

);

export default CountryList;


And this is the main App component:

import HeaderWithDarkMode from './components/headerwithdarkmode.component';
import SearchBarWithFilter from './components/searchbarwithfilter.component';
import './App.css';
import { Component } from 'react';
import React from 'react';
import CountryList from './components/countrylist.component';

class App extends Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
countries: []
};
}

componentDidMount() {
fetch("https://restcountries.com/v3.1/all")
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
countries: result.all
});
},

(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}

render() {
const { error, isLoaded, countries } = this.state;
if (error) {
return ;
} else if (!isLoaded) {
return ;
} else {
return (

);
}
}
}

export default App;


When I execute the project with "npm start" the page becomes blank and I got a lot of erros in the console like:

"Uncaught TypeError: Cannot read properties of undefined (reading 'map')
at CountryList (bundle.js:278:27)
at renderWithHooks (bundle.js:22826:22)
at mountIndeterminateComponent (bundle.js:25588:17)
at beginWork (bundle.js:26787:20)
at HTMLUnknownElement.callCallback (bundle.js:11776:18)
at Object.invokeGuardedCallbackDev (bundle.js:11825:20)
at invokeGuardedCallback (bundle.js:11885:35)
at beginWork$1 (bundle.js:31627:11)
at performUnitOfWork (bundle.js:30463:16)
at workLoopSync (bundle.js:30400:9)
react-dom.development.js:20085 The above error occurred in the <countrylist> component:

at CountryList (http://localhost:3000/static/js/bundle.js:278:19)
at div
at App (http://localhost:3000/static/js/bundle.js:35:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:20085
countrylist.component.jsx:6 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'map')
at CountryList (bundle.js:278:27)
at renderWithHooks (bundle.js:22826:22)
at mountIndeterminateComponent (bundle.js:25588:17)
at beginWork (bundle.js:26787:20)
at HTMLUnknownElement.callCallback (bundle.js:11776:18)
at Object.invokeGuardedCallbackDev (bundle.js:11825:20)
at invokeGuardedCallback (bundle.js:11885:35)
at beginWork$1 (bundle.js:31627:11)
at performUnitOfWork (bundle.js:30463:16)
at workLoopSync (bundle.js:30400:9)
modalComponent.js:2 Error: Attempting to use a disconnected port object
at chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:350577
at Dc (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:257067)
at t.unstable_runWithPriority (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:274846)
at Yo (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:197386)
at Nc (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:256528)
at yc (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:248018)
at chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:197609
at t.unstable_runWithPriority (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:274846)
at Yo (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:197386)
at Ko (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:197554)
sl @ modalComponent.js:2
modalComponent.js:2 Uncaught Error: Attempting to use a disconnected port object
at chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:350577
at Dc (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:257067)
at t.unstable_runWithPriority (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:274846)
at Yo (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:197386)
at Nc (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:256528)
at yc (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:248018)
at chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:197609
at t.unstable_runWithPriority (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:274846)
at Yo (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:197386)
at Ko (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:197554)
DevTools failed to load source map: Could not load content for chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/content.js.map: System error: net::ERR_BLOCKED_BY_CLIENT
DevTools failed to load source map: Could not load content for chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js.map: System error: net::ERR_BLOCKED_BY_CLIENT
DevTools failed to load source map: Could not load content for chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/analytics.js.map: System error: net::ERR_BLOCKED_BY_CLIENT "

Does anyone have an ideia of what is wrong with this ?

What I have tried:

I tried somethings with the code but none worked. Could someone help me ?