Using State in React Function

Question

I have been working on the backend and trying to learn React. So, sorry if it is a stupid question. I used the fetch component for API calls in my component with React Functions.

import React, {useState} from "react";
import { Row } from "react-bootstrap";
import * as Constants from '../Constants';
import './index.css';


function ActivitySuggestions(){
 
 var items = null;
 React.useEffect(() => {
    const url = "https://www.boredapi.com/api/activity";
    fetch(url)
      .then((response) => response.json())
     .then((json) => (items = json))
      .catch((error) => console.log(error));
  }, []);


  return(
    <div>items</div>
  );
}

export default ActivitySuggestions

But upon execution, I am getting the string 'text', or whatsoever the text I am providing inside the div, rendered on the browser. Please help me to understand where I am going wrong.

score 0 · Answer 1 · answered Jan 11 '23 at 11:25

There are a couple of issues in your code. Firstly, items is a normal variable and doesn't use the useState hook, and secondly, when injecting a variable's value into HTML, you need to use curly braces. Depending on what the API returns, you may need to return something like:

<div>
    {items.map((item) => {
       <div>{item.property}</div>
    })}
</div>

But anyway, here's the basic idea:

import React, {useState} from "react";
import { Row } from "react-bootstrap";
import * as Constants from '../Constants';
import './index.css';


function ActivitySuggestions(){
 
 const [items, setItems] = useState(null);
 React.useEffect(() => {
    const url = "https://www.boredapi.com/api/activity";
    fetch(url)
      .then((response) => response.json())
     .then((json) => (setItems(json)))
      .catch((error) => console.log(error));
  }, []);


  return(
    <div>{items}</div>
  );
}

export default ActivitySuggestions

score 0 · Answer 2 · answered Jan 11 '23 at 11:29

Use useState hook

import React, {useState} from "react";

function ActivitySuggestions(){
    const [items, setItems] = useState(null);

    React.useEffect(() => {
        const url = "https://www.boredapi.com/api/activity";
        fetch(url)
          .then((response) => response.json())
         .then((json) => setItems(json))
          .catch((error) => console.log(error));
      }, []);


    return(
        <div>
            {items ? JSON.stringify(items) : 'Loading...'}
        </div>
    );
}

export default ActivitySuggestions

there is issue in this code

return(
<div>items</div>

write like this:

return(
    <div>
        {items ? JSON.stringify(items) : 'Loading...'}
    </div>
)

Thanks for the quick one. And sorry for a silly miss. Please help me with why I will not have synchronization issue as mentioned https://stackoverflow.com/questions/54069253/the-usestate-set-method-is-not-reflecting-a-change-immediately — NutsAndBolts, Jan 11 '23 at 11:59

Using State in React Function

2 Answers2