API

  • Step
    Complete code
    
    
              'use client'
              import React from 'react';
              import { useState } from "react";
    
    
              export default function Home() {              
    
                  
                  const callAPI = async () => {
                    try {
                      const res = await fetch(
                        `https://jsonplaceholder.typicode.com/posts/1`
                      );
                      const data = await res.json();
                      console.log(data);
                    } catch (err) {
                      console.log(err);
                    }
                  };
                  
    
                  
    
                
    
                
                return (
                  <div className='App'>
                    
                    <button onClick={callAPI}>Call API</button>
                  </div>
                );
                
              }
    
              
  • API with UI
    
    
                  'use client'
              import React from 'react';
              import { useState, useEffect } from "react";
    
    
              export default function Home() {              
    
    
                
                const [posts, setPosts] = useState([]); 
                  
                  
    
    
    
                  useEffect(() => { 
                          const loadPost = async () => { 
                             
                    
                              const res = await fetch(
                                  "https://jsonplaceholder.typicode.com/posts/"
                              ); 
                              const data = await res.json();
                              // After fetching data stored it in posts state. 
                              setPosts(data); 
                    
                             
                          }; 
                    
                          // Call the function 
                          loadPost(); 
                }, []); 
    
                  
    
                
    
                
                return (
                  <div className="App"> 
                        { posts.map((item) => ( 
                                <div key={item.id}>
                                    <h4>{item.title}</h4> 
                                 </div>
                            )) } 
                    </div> 
                );
                
              }