How can i call variables inside function to the JSX?

Question

I get data from an API I called it but I want to show it in JSX I put it in variables and I call it but it says no defind How to call it correctly ?

import React, { useState } from 'react'
import './../App.css';
import axios from 'axios';


const today = new Date();
const year = today.getFullYear();
const month = today.getMonth() + 1;
const day = today.getDate() -1;


function Cards() {

    const [data1 , setData] = useState('');
    const [city , setCity] = useState('');
    const [show , setShow] = useState(false)
    
    const callAxios = ()=> {
     axios.get(`https://api.aladhan.com/v1/calendarByCity?city=${city}&country=SA&method=2&month=${month}&year=${year}`).then(res => {
      setData(res.data)
    })
    .catch(err => {console.log(err)} )
      
    const alyom = data1.data[day].date.hijri.weekday.ar;
    const date= data1.data[day].date.readable;
        const fajerTime = data1.data[day].timings.Fajr.slice(0,5);
        const eshragTime = data1.data[day].timings.Sunrise.slice(0,5);
        const duhurTime = data1.data[day].timings.Dhuhr.slice(0,5);
        const asrTime = data1.data[day].timings.Asr.slice(0,5);
        const maghribTime = data1.data[day].timings.Maghrib.slice(0,5);
        const ishaTime = data1.data[day].timings.Isha.slice(0,5);

  
  }; 

render (       
 <div className="cards">
          <h2>الفجر</h2>
          <p>{fajerTime}</p>
        </div>
        <div className="cards">
          <h2>الشروق</h2>
          <p>{eshragTime}</p>
);

Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — pilchard, Oct 02 '22 at 08:59
@3lawix9, In your function return keyword, is missing. To use data of API: Store the data GET API in a state and then retrieve the data to use it in JSX. — R. Mahbub, Oct 03 '22 at 08:27

score 0 · Answer 1 · answered Oct 03 '22 at 08:36

function Services() {
    const [services, setServices] = useState([]);
   
    useEffect(() => {
      fetch(`https://myApi.herokuapp.com/jobs?page=${page}&size=${size}`)
      .then(res=>res.json())
      .then(data=>setServices(data));
    }, [page,size])
    
  return (
    <div id="services">
      <h2>{services.name}</h2>
      <h2>{services.itemName}</h2>

    </div>

Or, when passing the data to display in other components.

      <div>
         {
            services.map(service =><Service
            key={service.id}
            service={service}
            ></Service>)
          }
      </div>

How can i call variables inside function to the JSX?

1 Answers1