ReactJS/NodeJS affichage annonces

Bonjour je suis en formation pour devenir développeur web, je bosse sur mon premier projet mais je n'arrive pas à afficher des annonces dans ma page d'accueil s'il vous plait pouvez vous jeter un coup d'oeil car j'ai une erreur merci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import Container from 'react-bootstrap/Container';
import CardDeck  from 'react-bootstrap/CardDeck';
import Card      from 'react-bootstrap/Card';
 
const HomeAnnonce = () => {
    const [ annonces, setAnnonces ] = useState([]);
 
    useEffect(() => {
        fetch('http://localhost:3001/api/annonces')
        .then((result) => {
            return result.json();
        })
        .then(({ status, annonces }) => {
            if (status === "OK") {
                setAnnonces(annonces);
            } else {
                console.log("error : ", status);
            }
        })
        .catch((error) => {
            console.log("error : ", error);
        });
    }, []);
 
    const renderedAnnonces = annonces.map((annonce) => {
        const { id, depart, description, arrivee, prix, jourdepart, jourarrivee } = annonce;
        return (
            <Card key={id}>
                <Card.Header>
                    <Card.Title as="h5">
                        <Link to={"/annonce/" + id}>Trajet au départ de {depart}</Link>
                        <p>le {jourdepart}&nbsp;</p>
                        <br/>
                        <p>arrivé à&nbsp;{arrivee}&nbsp; le {jourarrivee}</p>
                    </Card.Title>
                </Card.Header>
                <Card.Body>
                    <Card.Text>
                        {description}
                    </Card.Text>
                </Card.Body>
                <Card.Footer>
                   {prix}
                </Card.Footer>
            </Card>
        );
    });
 
    return (
        <Container>
            <h2>Voici nos dernieres annonces</h2>
            <CardDeck>
                {renderedAnnonces}
            </CardDeck>
        </Container>
    );
};
 
export default HomeAnnonce;

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
//Affichage des dernieres annonces sur la pages d'accueil
app.get("/api/annonces", (req, res) => {
    const sqlConnection = mysql.createConnection(sqlConfig);
 
    sqlConnection.query(
        "SELECT id, depart, description, arrivee, prix, jourdepart, jourarrivee FROM comoto_trajet "
        + "  ORDER BY jourdepart ASC"
        + "  LIMIT 12;",
        (error, result) => {
            if (error) {
                res.status(503).send({ status: "ERROR" });
            } else {
                console.log(result);
                res.send({
                    status: "OK",
                    annonces: result,
                });
            }
            sqlConnection.end();
        }
    );
});