REACT c'est quoi le problème avec ce code?

Je vais devenir fouhttps://image.noelshack.com/fichiers/2018/39/7/1538268074-risitas-en-colere-sticker.png

import React from "react"

import "./style.css"

import axios from "axios"





function Main() {



    const [token, setToken] = React.useState({})

    const [id, setId] = React.useState()



     React.useEffect(function() {

        axios.get(`https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=${id}&order=market_cap_desc&per_page=100&page=1&sparkline=false`)

        .then(res => {console.log(res)

        setToken(res.data)

        })

         .catch(err => {console.log(err)})

        



     



}, [id])





    return(



        <main>

            <div>

            <h2> Select the token you want to analyze  </h2>



                <input type="text" value={id} onChange={e =>setId(e.target.value)}/>



                <div>    

                {token.map(tokens => <h1> {tokens.symbol} </h1>)}

                </div>



                </div>

                

           



        </main>

    )



 }







export default Main

Pourquoi ça m'affiche une page blanche dès que je met le code

                <div>    

                {token.map(tokens => <h1> {tokens.symbol} </h1>)}

                </div>

Ca retourne quoi

Tu récupéres quelque chose avec ton console log ?

Le 13 mai 2022 à 10:35:09 :
Pourquoi ça m'affiche une page blanche dès que je met le code

                <div>    

                {token.map(tokens => <h1> {tokens.symbol} </h1>)}

                </div>

Bah peut être spécifier que t'appel de l'html

transforme la réponse de ton call API en json, ie .then((res)=> res.json()).then((resp)=>console.log(resp.data)

ça change rien bordel j'vais péter une pilehttps://image.noelshack.com/fichiers/2022/16/5/1650643250-ahuri.png

ce que ma console dit :<code>
react-dom.development.js:18572

The above error occurred in the <Main> component:

at Main (http://localhost/static/js/bundle.js:114:74)
at div

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18572
update.callback @ react-dom.development.js:18605
callCallback @ react-dom.development.js:13122
commitUpdateQueue @ react-dom.development.js:13143
commitLayoutEffectOnFiber @ react-dom.development.js:23290
commitLayoutMountEffects_complete @ react-dom.development.js:24578
commitLayoutEffects_begin @ react-dom.development.js:24564
commitLayoutEffects @ react-dom.development.js:24502
commitRootImpl @ react-dom.development.js:26779
commitRoot @ react-dom.development.js:26638
finishConcurrentRender @ react-dom.development.js:25848
performConcurrentWorkOnRoot @ react-dom.development.js:25765
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Main.js:33

Uncaught TypeError: token.map is not a function
at Main (Main.js:33:1)
at renderWithHooks (react-dom.development.js:16175:1)
at mountIndeterminateComponent (react-dom.development.js:20913:1)
at beginWork (react-dom.development.js:22416:1)
at beginWork$1 (react-dom.development.js:27381:1)
at performUnitOfWork (react-dom.development.js:26513:1)
at workLoopSync (react-dom.development.js:26422:1)
at renderRootSync (react-dom.development.js:26390:1)
at recoverFromConcurrentError (react-dom.development.js:25806:1)
at performConcurrentWorkOnRoot (react-dom.development.js:25706:1)</code>

tu dois mapper un array et pas un objet.
const [token, setToken] = React.useState([])

et vérifie que ton setToken soit bien un array

Utilise fetch au lieu d axios,
Fais une fonction que tu appelles dans ton useffect

Dans ton return

"La valeur de ton state"&& ton mapping