Why does my React app disappear when I run it-CodePudding

Whenever I get data on my page, after a few seconds, my whole react app disappears as in the root div in the html is left completely empty like this <div id="root"></div> as if there is nothing. This is happening on all my other projects too even when I create a new one, this disappearing of the react keeps happening sometimes even without adding any logic, it refuses to render plain html. The errors I get for now on this current project on the console is this

characters.map is not a function

I know not what could be causing this but my code looks like this for now starting with the App.js file. I am extracting data from an api.

import {BrowserRouter, Route, Routes} from "react-router-dom"
import Home from "./components/Home";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

And then followed by the CharactersListing page which is supposed to render all the characters of the show

import React, {useEffect, useState} from 'react'
import CharacterCard from './CharacterCard'

export default function BadListings() {
    const [characters, setcharacters] = useState([])
    
    useEffect(() => {
        const getData = async () => {
            await fetch("https://www.breakingbadapi.com/api/characters")
                .then(response => {
                    setcharacters(response.json());
                    console.log(characters);
                })
                .catch(err => console.log("There must have been an error somewhere in your code", err.message));
        }
        getData();
    });
    
    
  return (
    <div className='container'>
        {characters.map(character => (
            <div>
                <CharacterCard name={character.name} status={character.status} image={character.img} />
            </div>
        ))}
    </div>
  )
}

And finally, the CharacterCard.js

import React from 'react'
import "../styles/styles.css"

export default function CharacterCard({name, status, image}) {
  return (
    <div className='card'>
        <h1>{name}</h1>
        <h2>{status}</h2>
        <img src={image} alt="umfanekiso" className='imgur' />
    </div>
  )
}

I do not know what could be causing this. I have never had this issue it just started today. What could be causing it

CodePudding user response：

characters is a string and strings don't have .map() method, that's why React is crashing. And since React's crashed, it couldn't mount generated HTML to the #root.

You can use [...strings] to use .map() method.

CodePudding user response：

You are exporting CharacterCards and not BadCards.

Please change all BadCards in your CharactersListing page to CharacterCards

There is an explaination What does "export default" do in JSX?

CodePudding user response：

Great instinct to look for errors in the console.

Umut Gerçek's answer is correct, but I'd add an additional suggestion: if you're going to map over something, you should instantiate it in state as a thing that can be mapped. Set its initial state to an array:

const [characters, setCharacters] = useState([])

Note the capital 'C' in the setter; that is the useState convention.

Then set characters as you're currently doing:

setCharacters(response.json());

And your map should work regardless of the result of your fetch, and handle multiple items, too.