REACT - Component not displaying parameters - react-typescript

Question

I'm new in REACT with typescript and I'm meeting some problems.
I have a page (FanClub.tsx) that getting data from web and display many components (FanComponent.txs). There are the good number of components, but I'm passing values to components and there is no displaying of this values.
I made a repo on github to test if you want to try/test: github react problem
If anyone can tell me why the props (parameters in component) are not displaying.
Thanks.
FanClub.tsx
import React, { useState, useEffect } from 'react';
import { useQuery } from "react-query";
import FanComponent from '../components/FanComponent';
import Navbar from '../components/Navbar/Navbar';
import '../css/fanapp.css';
import Fan from '../Models/Fan';
import AccessDataService from '../Services/AccessDataService';
const FanClub: React.FC = () => {
const [allFans, setAllFans] = useState<Fan[]>([]);
useEffect(() => {
console.log("Je suis dans useEffect, et allFans contient :")
console.log(allFans.length + " éléments");
}, [allFans]);
useQuery<Fan[]>(
"query-fans",
async () => {
console.log("Coucou, je suis ici : query-fans !");
// Oui, je sais, mais rien ne vaut un "coucou je suis ici"
return await AccessDataService.GetAllFans();
},
{
enabled: true,
onSuccess: (res) => {
setAllFans(res);
},
onError: (err: any) => {
console.error("ERREUR 12 - " + err);
setAllFans([]);
},
}
);
return (
<div className="page">
<div className="sidebar">
<Navbar />
</div>
<div className='row'>
<div>Coucou de la FanClub page</div>
<div className="fanClub">
{allFans.map((fan) =>
(
<FanComponent key={fan.Id}
nom={fan.Nom}
id={fan.Id}
nombreClick={fan.NombreDeClickRecu} />
))
}
</div>
</div>
</div>
);
}
export default FanClub;
And FanComponent.tsx
import { Component } from 'react';
import './FanComponent.css';
interface FanComponentProps {
id: number;
nom: string;
nombreClick: number;
}
export default class FanComponent extends Component<FanComponentProps> {
constructor(props: FanComponentProps)
{
super(props);
}
render() {
const { id, nom, nombreClick } = this.props;
return (
<div className="fan grow">
<div>
<div>ID : {id}</div>
<div>Nom : {nom}</div>
<div>Nombre de click : {nombreClick}</div>
</div>
<button>
Click sur Moi
</button>
</div>
);
}
}

Answer 1

I found the problem.
My interface Fan does not represent the name of JSON properties.
The JSON data :
[
{
"id": 1,
"nom": "Michel",
"nombreDeClickRecu": 0,
"infoDiverses": "Plein d'infos",
"dateInscription": "2018-05-10T00:00:00"
},
{
"id": 2,
"nom": "Jean",
"nombreDeClickRecu": 0,
"infoDiverses": "Plein d'infos",
"dateInscription": "2018-05-10T00:00:00"
}
]
Before :
export default interface Fan
{
Id: number,
Nom: string,
NombreDeClickRecu: number,
InfoDiverses: string,
DateInscription: Date,
}
After :
export default interface Fan
{
id: number,
nom: string,
nombreDeClickRecu: number,
infoDiverses: string,
dateInscription: Date,
}