Foutmeldingen

Een foutmelding lezen

Een foutmelding is geen straf, maar een hint. De computer vertelt je wat er mis is, en vaak ook waar.

Waar zie je de foutmelding?

• Browser: F12 → tabje Console
• Vite: een rood scherm over je pagina, of de terminal waar npm run dev draait

Zo pak je het aan

1. Lees de eerste rode regel. Die zegt wat er mis is
2. Zoek de bestandsnaam en het regelnummer, bijv. App.jsx:12. Daar zit de fout (of net een regel erboven)
3. Zoek je foutmelding hieronder op

Cannot read properties of undefined (map)

Uncaught TypeError: Cannot read properties of undefined (reading 'map')

Wat betekent het? Je doet .map() op iets dat (nog) niet bestaat. Meestal is je data nog niet geladen: de eerste keer dat je component rendert, is de fetch nog bezig.

const [products, setProducts] = useState();

return products.map((p) => <p key={p.id}>{p.name}</p>);

const [products, setProducts] = useState([]); // begin met lege array

return products.map((p) => <p key={p.id}>{p.name}</p>);

unique "key" prop

Each child in a list should have a unique "key" prop.

Wat betekent het? Bij .map() moet elk element een unieke key hebben, zodat React weet welk item welk is.

{todos.map((todo) => (
  <li>{todo.title}</li>
))}

{todos.map((todo) => (
  <li key={todo.id}>{todo.title}</li>
))}

Zet de key op het buitenste element in je .map(). Gebruik bij voorkeur een id uit je data.

Too many re-renders

Too many re-renders. React limits the number of renders to prevent an infinite loop.

Wat betekent het? Je component zit in een oneindige loop: hij zet state, rendert opnieuw, zet weer state, enzovoort.

<button onClick={setCount(count + 1)}>+1</button>

<button onClick={() => setCount(count + 1)}>+1</button>

Zonder () => wordt setCount meteen uitgevoerd tijdens het renderen, in plaats van pas bij de klik.

Objects are not valid as a React child

Objects are not valid as a React child (found: object with keys {name, age}).

Wat betekent het? Je probeert een heel object op het scherm te zetten. React kan alleen tekst, getallen en JSX tonen.

<p>{user}</p>

<p>{user.name}</p>

Invalid DOM property `class`

Invalid DOM property `class`. Did you mean `className`?

Wat betekent het? In JSX heet class className (omdat class al een woord is in JavaScript).

<div class="card">
<label for="email">

<div className="card">
<label htmlFor="email">

Adjacent JSX elements

Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

Wat betekent het? Een component mag maar één buitenste element teruggeven.

return (
  <h1>Titel</h1>
  <p>Tekst</p>
);

return (
  <>
    <h1>Titel</h1>
    <p>Tekst</p>
  </>
);

Failed to resolve import

Failed to resolve import "./components/Navbar" from "src/App.jsx". Does the file exist?

Wat betekent het? Vite kan het bestand dat je importeert niet vinden.

• Pad fout? ./ = dezelfde map, ../ = een map omhoog
• Hoofdletters? navbar.jsx en Navbar.jsx zijn verschillend
• Staat het bestand echt in die map? Kijk in de verkenner van VS Code

does not provide an export named 'default'

Uncaught SyntaxError: The requested module '/src/components/Card.jsx' does not provide an export named 'default'

Wat betekent het? Je import en je export passen niet bij elkaar.

// Card.jsx
export const Card = () => { ... };

// App.jsx
import Card from "./components/Card";

// Card.jsx
const Card = () => { ... };
export default Card;

// App.jsx
import Card from "./components/Card";

Regel: export default → importeren zonder { }. Gewone export → importeren met { }.

uncontrolled input to be controlled

A component is changing an uncontrolled input to be controlled.

Wat betekent het? De value van je input was eerst undefined en daarna een tekst.

const [naam, setNaam] = useState();

<input value={naam} onChange={(e) => setNaam(e.target.value)} />

const [naam, setNaam] = useState(""); // begin met lege tekst

<input value={naam} onChange={(e) => setNaam(e.target.value)} />

Invalid hook call

Invalid hook call. Hooks can only be called inside of the body of a function component.

Wat betekent het? Je gebruikt een hook (useState, useEffect, …) op een plek waar het niet mag.

const Teller = () => {
  const handleClick = () => {
    const [count, setCount] = useState(0); // in een functie!
  };
};

const Teller = () => {
  const [count, setCount] = useState(0); // bovenaan je component

  const handleClick = () => {
    setCount(count + 1);
  };
};

Hooks altijd bovenaan je component. Niet in een functie, if of loop.

useNavigate() zonder Router

useNavigate() may be used only in the context of a <Router> component.

Wat betekent het? Je gebruikt iets van React Router, maar je app zit niet in een <BrowserRouter>.

// main.jsx
import { BrowserRouter } from "react-router-dom";

createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Zie ook React Router.