{"id":6028,"date":"2023-02-27T12:23:11","date_gmt":"2023-02-27T12:23:11","guid":{"rendered":"https:\/\/www.goodacademic.com\/blog\/questions\/computer-systems-question\/"},"modified":"2023-02-27T12:23:11","modified_gmt":"2023-02-27T12:23:11","slug":"computer-systems-question","status":"publish","type":"questions","link":"https:\/\/www.goodacademic.com\/blog\/questions\/computer-systems-question\/","title":{"rendered":"Computer Systems Question"},"content":{"rendered":"
\n Learning Goal: <\/b>I’m working on a computer systems and need to help me learn.<\/p>\n

here’s an example React code that uses fetch()<\/code> combined with useEffect()<\/code> to load data from a REST API and display it on the page::-<\/p>\n

import React, { useState, useEffect } from “react”;<\/p>\n

function App() {<\/p>\n

const [data, setData] = useState([]);<\/p>\n

useEffect(() => {<\/p>\n

async function fetchData() {<\/p>\n

const response = await fetch(“https:\/\/example.com\/api\/data”);<\/p>\n

const json = await response.json();<\/p>\n

setData(json);<\/p>\n

}<\/p>\n

fetchData();<\/p>\n

}, []);<\/p>\n

return (<\/p>\n

<div><\/p>\n

{data.map((item) => (<\/p>\n

<div key={item.id}>{item.title}<\/div><\/p>\n

))}<\/p>\n

<\/div><\/p>\n

);<\/p>\n

}<\/p>\n

export default App;<\/p>\n

In this example, we’re using useState()<\/code> to create a state variable called data<\/code>, which we’ll use to store the data that we fetch from the API. We’re also using useEffect()<\/code> with an empty dependency array to fetch the data when the component mounts for the first time.<\/p>\n

Inside the useEffect()<\/code> hook, we define an async function called fetchData()<\/code>, which uses fetch()<\/code> to make a GET request to our API endpoint. We then parse the JSON response using response.json()<\/code>, and set the data<\/code> state variable using setData()<\/code>.<\/p>\n

In the return<\/code> statement, we use data.map()<\/code> to render each item in the data<\/code> array as a <div><\/code> element with the item’s title<\/code> property as its content.<\/p>\n

Note that in a real application, you would probably want to handle errors and loading states, and possibly also use a library like axios<\/code> instead of fetch()<\/code> to simplify your API calls.<\/p>\n