Affichage des données a partir d'un api avec react

Fermé
mimi19911980 Messages postés 26 Date d'inscription mardi 10 novembre 2020 Statut Membre Dernière intervention 14 octobre 2021 - Modifié le 14 oct. 2021 à 16:26
Bonjour,

je fait appel a un api pour afficher les nombre cas covid le nombre de cas vacciné le nombre de deces:
mais j'ai rien ne m'affiche quand je fait console.log(data) ca m'affiche sur la console du navigateur mais pour afficher sur la page web ca marche pas quelqu'un peut me donner une idée.


voici ce qui M'affiche sur la console du navigateur






voici mon code:




import { useState } from "react";
import { Button, Card, Container, Input, Message, Select } from "semantic-ui-react";

const Recherche=()=>{

 
    
    const [prov, setProv] = useState("");
    const [stat, setStat] = useState("");
    const [erreur, setErreur] = useState("");
    const [date,setDate]=useState("")   ;
    const [data,setData]=useState([])   ;
 
   console.log(data)
    console.log(stat)
    console.log(prov)
    console.log(date)

    const renderPays = () => {
             return (
                <Card  >
                    <div className="cas">
                     <Card.Content>
                         
                        <Card.Header>
                        {Object.values(data)[0] && Object.values(Object.values(data)[0])[0]}                                       
                       </Card.Header>
 
                    </Card.Content>
                    </div>
                     <div className="rec">
                     <Card.Content>
                         
                        <Card.Header>
                                                            </Card.Header>
 
                    </Card.Content>
                    </div>

                </Card>)
       

    }
     const appelerAPI = () => {

        if(stat!==0){
    
        fetch(`https://api.opencovid.ca/timeseries?loc=${prov}&date=${date}`)
            .then((response) =>
             response.json())
              .then((data) =>{setData(data)})
              .catch((er) => setErreur(er));
        
        }
        else{
            <Message>helleo</Message>
        }  
    };
    

     

return(<div className="recherche">

<Container>
 

            <select id="MenuDeroulant" class="ui dropdown" onClick={(e) => setProv(e.target.value)}>
                 <option value="QC">QUEBEC</option>
                <option value="ON">ONTARIO</option>
              
            </select>

<Input type="date" value={date} onChange={(e) => { setDate(e.target.value) }}></Input>

 
 <Button primary onClick={appelerAPI}> Lancer la recherche </Button>
<Button secondary> Vider la recherche </Button>

  
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", width: "100%" }}>
                {data.length > 0 ? renderPays() :<Message warning>il y  a rien </Message>}
                
             </div>
 
</Container>
</div>)

}

export default Recherche;