Data doesn't seem to be showing in my table for a Axios API call within react believe the error is related to this console error below.

Following a YT tutorial https://www.youtube.com/watch?v=AcYhi08e404

Cannot Read properties of undefined (Reading 'map')]

APP.JS

import React, { useEffect, useState } from 'react';
import { Route, Routes } from 'react-router-dom';
import Navbar from './components/Navbar';
import { ThemeProvider } from './context/ThemeContext';
import Home from './pages/Home';
import Signin from './pages/Signin';
import Signup from './pages/Signup';
import Account from './pages/Account';
import axios from 'axios';

function App() {
    const [coins, setCoins] = useState([]);
  
    useEffect(() => {
      axios.get(
          'https://api.coingecko.com/api/v3/coins/markets?vs_currency=gbp&order=market_cap_desc&per_page=10&page=1&sparkline=true'
        )
        .then(res => {
          setCoins(res.data);
          console.log(res.data);
        })
        .catch(error => console.log(error));
    }, []);
  



  return <ThemeProvider>
    <Navbar />
    <Routes>
  <Route path='/' element={<Home coins={coins} />} />
  <Route path='/signin' element={<Signin />} />
  <Route path='/signup' element={<Signup />} />
  <Route path='/account' element={<Account />} />
    </Routes>
    </ThemeProvider>;
}

export default App;


COINSEARCH.JSX
    
    import React  from 'react';
    import CoinItem from './CoinItem';
    
    
    
    const CoinSearch = ({ coins }) => {
        return (
          <div>
            <div>
            <h1>Search</h1>
            <form>
              <input type="text" placeholder='Search'/>
            </form>
          </div>
    
          <table className='w-full border-collapse text-center'>
            <thead>
              <tr className='border-b'>
                <th></th>
                <th className='px-4'>#</th>
                <th className='text-left'>Coin</th>
                <th></th>
                <th>Price</th>
                <th>24h</th>
                <th className='hidden md:table-cell'>24h Volume</th>
                <th className='hidden sm:table-cell'>Mkt</th>
                <th>Last 7 Days</th>
              </tr>
            </thead>
            <tbody>
              <tr>
              {coins.map((coin) => (
                <CoinItem key={coin.id} coin={coin} />
              ))}
              </tr>
              </tbody>
            </table>
          </div>
        );
      };
    
    export default CoinSearch;
    
    
    COINITEM.JSX
    
    import React from 'react'
    import { AiOutlineStar } from 'react-icons/ai'
    import { Sparklines, SparklinesLines } from 'react-sparklines';
    
    export const CoinItem = ({coin}) => {
      return (
        <tr>
        <td>
          <AiOutlineStar />
        </td>
        <td>{coin.market_cap_rank}</td>
        <td>
          <div>
            <img src={coin.image} alt={coin.id} /> 
            <p>{coin.name}</p>
          </div>
        </td>
        <td>{coin.symbol}</td>
        <td>{coin.current_price}</td>
        <td>{coin.price_change_percentage_24h}</td>
        <td>{coin.total_volume}</td>
        <td>{coin.market_cap}</td>
        <td>
          <Sparklines data={coin.sparkline_in_7d.price}>
            <SparklinesLines color='green' />
          </Sparklines>
        </td>
    </tr>
      );
    };

export default CoinItem;

Reasonably new to react and struggling to get past this hurdle, any help would be appreciated!

CodePudding user response：

In Initial render, coin is undefined until it fetches the data , so use shortcircuit condition in COIN component

           <tbody>
              <tr>
              // map through coins only if its defined..
              {coins && coins.map((coin) => (
                <CoinItem key={coin.id} coin={coin} />
              ))}
              </tr>
            </tbody>

CodePudding user response：

you are sending props to your home component in App.js can you show me your home component