Question 74528 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Display Output from JS Loop in React Component – Reactjs

import React from "react";

function Api(){
    return(
      
        fetch('http://universities.hipolabs.com/search?country=Pakistan')
        .then((api_data) => {
            return api_data.json();
        })
        
        .then((json_data) => {
            for(let i=0; i<json_data.length; i++){
                <div style={{borderWidth:2}}>
                Serial No: {i} <br />
                Name of University: {json_data[i].name} <br />
                Province Code: {json_data[i].stateProvince} <br />
                Country: {json_data[i].country} <br />
                Country Code: {json_data[i].alpha_two_code} <br />
                URL Domain: {json_data[i].domains[0]} <br />
                URL: {json_data[i].web_pages[0]} <br />
                </div>
            }
        })
        
        .catch((error) => {
            console.log(error);
        })

);
}

export default Api;

I want to get dispaly from the above code, but it is showing a blank screen.

Tags:

3

Answers


  1. 0

    you need to use useEffect and useState

    and Api must return a valid jsx not response

    this worked fine!

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

function Api(){
    const [result , setResult] = useState(<>Loading</>);
    useEffect(()=>{
      fetch('http://universities.hipolabs.com/search?country=Pakistan')
        .then((api_data) => {
            return api_data.json();
        })
        .then( (json_data , index) => {
            setResult(json_data.map( (jd) => 
                <div style={{borderWidth:2}} key={index}>
                Serial No: {index} <br />
                Name of University: {jd.name} <br />
                Province Code: {jd.stateProvince} <br />
                Country: {jd.country} <br />
                Country Code: {jd.alpha_two_code} <br />
                URL Domain: {jd.domains[0]} <br />
                URL: {jd.web_pages[0]} <br />
            </div>));
        })
        .catch((error) => {
            return <p>Error !</p>;
        });
    },[]);

    return result;
}

export default Api;
    Login or Signup to reply.
  2. 0

    You are not returning the div element,try to return it

    Login or Signup to reply.
  3. 0

    You need to add return here

    setResult(json_data.map( (jd) => 
                **return** <div style={{borderWidth:2}} key={index}>

    but better if you will save API call result in result state and after that you can render it using map.

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

function Api(){
    const [result , setResult] = useState(<>Loading</>);
    useEffect(()=>{
      fetch('http://universities.hipolabs.com/search?country=Pakistan')
        .then((api_data) => {
            return api_data.json();
        })
        .then( (json_data , index) => {
             // here u set result 
        })
        .catch((error) => {
            return <p>Error !</p>;
        });
    },[]);

    // here you can render result
}

export default Api;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search