Отображение вывода из цикла JS в компоненте React

вам нужно использовать useEffect и useState

и API должен возвращать действительный ответ jsx not

это сработало нормально!

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;

Вы не возвращаете элемент div, попробуйте вернуть его

Здесь нужно добавить возврат

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

но лучше, если вы сохраните результат вызова API в состоянии результата, и после этого вы сможете отобразить его с помощью карты.

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;