How to display a message instead of an empty array-CodePudding

My app has two buttons, one that displays information and another that hides it. This works as intended, however, some of the images loaded in from the API don't have any data available, and when the button to display the info is pressed, it returns a []

How would I target those that load with an empty array, and add in a string. For example "no information for this breed is available?"

App.js

import './App.css';
import './Dog.js';
import './index.css';
import "./Grid.js";
import NestedGrid from './Grid.js';
import Album from './Grid.js';
import AppLayout from './Grid.js';



function DogApp() {

  return (
    <div className="dogApp">
      <AppLayout />
    </div>

  );
}

export default DogApp;

Grid.js

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import CssBaseline from '@mui/material/CssBaseline';
import Grid from '@mui/material/Grid';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import Link from '@mui/material/Link';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import FetchAPI from './FetchAPI';


const cards = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const theme = createTheme();

export default function AppLayout() {
    return (
        <ThemeProvider theme={theme}>
            <CssBaseline />
            <AppBar position="relative">
            </AppBar>
            <main>
                {/* Hero unit */}
                <Box
                    sx={{
                        bgcolor: 'background.paper',
                        pt: 8,
                        pb: 6,
                    }}
                >
                    <Container maxWidth="sm">
                        <Stack
                            sx={{ pt: 4 }}
                            direction="row"
                            spacing={2}
                            justifyContent="center"
                        >
                        </Stack>
                    </Container>
                </Box>

                <Container sx={{ py: 8 }} maxWidth="md">
                    {/* End hero unit */}
                    <Grid container spacing={4}>
                        {cards.map((card) => (
                            <Grid item key={card} xs={12} sm={6} md={4}>
                                <Card
                                    sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}
                                >
                                    <FetchAPI />
                                    <CardContent sx={{ flexGrow: 1 }}>
                                    </CardContent>

                                </Card>
                            </Grid>
                        ))}
                    </Grid>
                </Container>
            </main>
        </ThemeProvider>
    );
}

FetchAPI.js

import React, { useState, useEffect } from 'react'


const FetchAPI = () => {

    const [show, setShow] = useState({});
    const [data, setData] = useState([]);

    const apiGet = () => {
        const API_KEY = "";
        fetch(`https://api.thedogapi.com/v1/images/search?limit=2&page=10&order=Desc?API_KEY=${API_KEY}`)
            .then((response) => response.json())
            .then((json) => {
                console.log(json);
                setData([...data, ...json]);
            });
    };

    useEffect(() => {           //call data when pagee refreshes/initially loads 
        apiGet();
    }, []);

    return (

        <div>
            {data.map((item, id) => (
                <div>
                    <img alt="dog photos" className="dogImg" src={item.url}></img>
                    {show[id] === false ? <p>{JSON.stringify(item.breeds, null, '\t')}</p> : null}
                    <button onClick={() => setShow((prev) => ({ ...prev, [id]: false }))}>Learn more about this dog!</button>
                    <button onClick={() => setShow((prev) => ({ ...prev, [id]: true }))}>Hide information</button>
                </div>

            ))}
        </div>

    )
}

export default FetchAPI;

CodePudding user response：

You can compare the length of array like:

if(arr.length===0){
   return "no information for this breed is available"
}

The above condition is just for understanding you can change the logic as well either you want to return or save in some state.