[FIXED] How can I call array data in a useEffect - ReactJS

Issue

I am trying to fetch the weather data of a farm with latitude and longitude coordinates. I have successfully managed to get the farm data from the Api to a React Component. And now I want to fetch the weather data of the farm using its coordinates. I am using openweathermap

But the Problem is, I keep getting this error: GET http://api.openweathermap.org/data/2.5/weather?lat=undefined&lon=undefined&appid=[API]&units=metric 400 (Bad Request)

Someone please help

Here is the Farm Component

import React, { useState, useEffect } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";
import Menubar from "../../components/menubar/Menubar";
import Skeleton from "react-loading-skeleton";
import toast, { Toaster } from 'react-hot-toast';
import axios from 'axios';

import { LazyLoadImage } from "react-lazy-load-image-component";
import Weather from "../../components/weather/Weather";
import FarmWeather from "../../components/weather/FarmWeather";


function FarmDetails() {
    let navigate = useNavigate();
    const [farm, setFarm] = useState('');
    const { username } = useParams();
    const { farmId } = useParams();
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {

        let isMounted = true;

        axios.get(`/api/farm/${username}/${farmId}`).then(res => {
            if (isMounted) {
                if (res.data.status === 200) {
                    setFarm(res.data.farm);
                    setIsLoading(false);
                    console.warn(res.data.farm)
                }
                else if (res.data.status === 404) {
                    navigate('/');
                    toast.error(res.data.message, "error");
                }
            }

        });

        return () => {
            isMounted = false
        };
    }, []);


    return (
        <div>
            <Menubar />
            <div className="appHeader bg-primary text-light">
                <div className="left">
                    <a onClick={() => navigate(-1)} className="headerButton goBack">
                        <i className="fi fi-rr-angle-left"></i> </a>
                </div>
                <div className="pageTitle">{farm.farmname}</div>
                <div className="right"></div>
            </div>
            <div id="appCapsule">
                <div className="section mt-3 mb-3">
                    <div className="card">
                        <div className="card-header">
                            Discover
                        </div>
                        <div className="card-body">
                            <h5 className="card-title">Farm Supplies</h5>
                            <p className="card-text">Order for farm supplies suitable for your farm and grow healthy fruits</p>
                            <a href="shop.php" className="btn btn-primary spinner-btn">Go to Shop</a>
                        </div>

                    </div>

                </div>

                <FarmWeather farm={farm} />

                <div className="section mt-3 mb-3">
                    <div className="row">
                        <div className="col-6">

                            <div className="card card-normal">
                                <div className="card-body">
                                    <h5 className="card-title title-small mb-2">Location</h5>
                                    <div className="card-icon mb-0">
                                        <i className="fi fi-rr-marker"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div className="col-6">

                            <div className="card card-normal card-add">
                                <a href="farm-fruits.php?view=<?php echo $row['farmid']; ?>">
                                    <div className="card-body">
                                        <h5 className="card-title title-small mb-2">Fruits</h5>
                                        <div className="card-icon mb-0">
                                            <i className="fi fi-rr-apple-whole"></i>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>

                        <div className="col-6">

                            <div className="card card-normal">
                                <div className="card-body">
                                    <h5 className="card-title title-small mb-2">Sales</h5>
                                    <div className="card-icon mb-0">
                                        <i className="fi fi-rr-bolt"></i>
                                    </div>
                                </div>
                            </div>


                        </div>

                        <div className="col-6">

                            <div className="card card-normal">
                                <div className="card-body">
                                    <h5 className="card-title title-small mb-2">Expenses</h5>
                                    <div className="card-icon mb-0">
                                        <i className="fi fi-rr-settings"></i>
                                    </div>
                                </div>
                            </div>


                        </div>

                    </div>
                </div>
            </div>



        </div>
    );
}
export default FarmDetails;

And the Weather Component

import React, { useState, useEffect } from "react";


const FarmWeather = ({ farm }) => {

    const [weather, setWeather] = useState({});

    useEffect(() => {
        fetch(`//api.openweathermap.org/data/2.5/weather?lat=${farm.latitude}&lon=${farm.longitude}&appid=[API]&units=metric`)
            .then((result) => result.json())
            .then((weather) => {
                setWeather(weather);
            });
    }, []);

    console.warn("result", weather)

    return (
        <div className="section mt-3 mb-3">
            <div className="card text-white bg-primary mb-2">
                <div className="card-header">Weather in <span>{weather.name}</span>
                    <div className="weather-icon">
                        <img src={`http://openweathermap.org/img/w/${weather.weather && weather.weather[0].icon}.png`} alt="weather icon" />
                    </div>
                </div>
                <div className="card-body">
                    <h5 className="card-title">Temp <span>{weather.main && weather.main.temp} &deg;C</span></h5>
                    <p className="card-text">Our Technologies have discovered that the Current Weather around your Farm in {farm.county && farm.county.countyname} is
                        Mostly
                        <span id="description" ></span>
                    </p>
                </div>
            </div>
        </div>
    );
}
export default FarmWeather;

Solution

You need to check that farm is defined before making the api call, you can put it as a dependency.

useEffect(() => {
        if (farm) fetch(`//api.openweathermap.org/data/2.5/weather?lat=${farm.latitude}&lon=${farm.longitude}&appid=[API]&units=metric`)
            .then((result) => result.json())
            .then((weather) => {
                setWeather(weather);
            });
    }, [farm]);

Answered By - Chris Hamilton
Answer Checked By - - David Marino (ReactFix Volunteer)