Plotting data in react google charts

Question

I've a JSON which is as:

{
   "cod":"200",
   "message":0,
   "cnt":40,
   "list":[
      {
         "dt":1601024400,
         "main":{
            "temp":301.11,
            "feels_like":301.34,
            "temp_min":301.11,
            "temp_max":301.2,
            "pressure":1010,
            "sea_level":1010,
            "grnd_level":907,
            "humidity":58,
            "temp_kf":-0.09
         },
         "weather":[
            {
               "id":803,
               "main":"Clouds",
               "description":"broken clouds",
               "icon":"04d"
            }
         ],
         "clouds":{
            "all":68
         },
         "wind":{
            "speed":4.24,
            "deg":238
         },
         "visibility":10000,
         "pop":0.25,
         "sys":{
            "pod":"d"
         },
         "dt_txt":"2020-09-25 09:00:00"
      }
   ]
}  

I'm using useAsync hook to pull the data.

import React from 'react';

import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography'

// Chart
import Chart from "react-google-charts";

// async
import { useAsync } from 'react-async';

const loadUsers = async () =>
  await fetch("http://api.openweathermap.org/data/2.5/forecast?q=bengaluru&appid={API_KEY}")
    .then(res => (res.ok ? res : Promise.reject(res)))
    .then(res => res.json())
  

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
        padding: theme.spacing(5)
    },
    paper: {
        padding: theme.spacing(2),
        textAlign: 'left',
        color: theme.palette.text.secondary,
    },  
}));

export default function Dashboard() {
   
    const { data, error, isLoading } = useAsync(
        { 
            promiseFn: loadUsers 
        }
    )
    const classes = useStyles();
    if (isLoading) return "Loading..."
    if (error) return `Something went wrong: ${error.message}`
    console.log("Data is", data)
    if (data)

    return (
        <div className="container">
            <div className="App">
                <h2>Weather Details</h2>
            </div>
            <div className={classes.root}>
                <Grid container spacing={3}>
                    <Grid item xs={4}>
                        <Card className={classes.root} variant="outlined">
                            <CardContent>
                                <Typography className={classes.title} color="textFirst" gutterBottom>
                                    Temparature Data:
                                </Typography>
                                <Typography variant="body2" component="p">
                                
                                </Typography>
                            </CardContent>
                        </Card>
                    </Grid>
                    <Grid item xs={4}>
                        <Card className={classes.root} variant="outlined">
                            <CardContent>
                                <Typography className={classes.title} color="textFirst" gutterBottom>
                                    Pressure Data:
                                </Typography>
                                <Typography variant="body2" component="p">
                                    
                                </Typography>
                            </CardContent>
                        </Card>
                    </Grid>
                    <Grid item xs={4}>
                        <Card className={classes.root} variant="outlined">
                            <CardContent>
                                <Typography className={classes.title} color="textFirst" gutterBottom>
                                    Wind Data:
                                </Typography>
                                <Typography variant="body2" component="p">
                                    
                                    
                                </Typography>
                            </CardContent>
                        </Card>
                    </Grid>
                </Grid>
            </div>
            {data.list.map((weather, index) => (
                <div key={index} className="row"> 
                <div className="col-md-12">
                    <p>{weather.main.temp_min}</p>
                    <p>{weather.main.temp_max}</p>
                </div>
                </div>
            ))}
        </div>
    )

}  

temp_min and temp_max gets pulled successfully.
But when I modify my card code as

<Card className={classes.root} variant="outlined">
                            <CardContent>
                                <Typography className={classes.title} color="textFirst" gutterBottom>
                                    Temparature Data:
                                </Typography>
                                <Typography variant="body2" component="p">
                                    <Chart
                                        chartType="BarChart"
                                        data = {
                                            weather.main.temp_min
                                        }
                                    />
                                </Typography>
                            </CardContent>
                        </Card>

I get this error:

'weather' is not defined no-undef

How can I plot temp_min?

Answer 1

You try to access a variable, that does not exists (weather is not declared in this scope). If I understand your intention right, you try to plot all temp_min in a chart, so do a projection over your array.

Update:

Based on the documentation you need to provide x and y value pairs representing one data point. The first value pair of the data array must be the headers of the graph.

const mapped = data.list.map(d => [new Date(d.dt), d.main.temp_min]);
const chartData = [["Time", "Temperature"], ...mapped];

<Card className={classes.root} variant="outlined">
  <CardContent>
    <Typography className={classes.title} color="textFirst" gutterBottom>
      Temparature Data:
    </Typography>
    <Typography variant="body2" component="p">
      <Chart
        chartType="BarChart"
        data={chartData}
      />
    </Typography>
  </CardContent>
</Card>