How can I call function from div and render the json object returned?

Question

I have the following react js code page:

import React, { useState } from "react";
import { Auth, API } from "aws-amplify";

function dailyFiles(props) {
 const [apiError502, setApiError502] = useState(false); 

  // Pull out into a generic reusable function
  const getData = async () => {
    try {
      let apiName = "Dev";
      let path = "/test";
      let myInit = {
        headers: {
          Authorization: `Bearer ${(await Auth.currentSession())
            .getIdToken()
            .getJwtToken()}`
        }
      };
       var result = await API.get(apiName, path, myInit);
    } catch (e) {
      if (e.message === "Request failed with status code 502") {
        toggleApiError502(true);
      } else {
        alert(JSON.stringify(e));
        props.onLogout();
      }
    }
    return result;
  };

  const toggleApiError502 = (show = false) => {
    setApiError502(show);
  };

  var files = {
    Files: [
      {
        Day: "Monday",
        file: "10-02-2020"
      },
      {
        Day: "Friday",
        file: "14-02-2020"
      }
    ]
  };

  return (
    <div className="animated fadeIn">
      <div>
        {files.Files.map(block => block.Day + ": " + block.file + "  ")}
      </div>
    </div>
  );
}

export default dailyFiles;

When I call from my div the static Var files variable:

var files = {Files: [{Day: "Monday",file: "10-02-2020"},{Day: "Friday",file: "14-02-2020"}]};

  <div>
    {files.Files.map(block => block.Day + ": " + block.file + "  ")}
  </div>

I got the expected result, but how can I get the same result calling my function getData()?

const getData = async () => {

getData function call an API which return the same content result as var files has?

I've tried to call the function with this.getdata() within the div but not successful result.

Junius L · Accepted Answer · 2020-03-14 07:48:10Z

1

Use useEffect to get the data after the component has mounted.

function dailyFiles(props) {
  const [apiError502, setApiError502] = useState(false);
  const [files, setFiles] = useState([]);

  useEffect(() => {
    // Pull out into a generic reusable function
    const getData = async () => {
      try {
        let apiName = "Dev";
        let path = "/test";
        let myInit = {
          headers: {
            Authorization: `Bearer ${(await Auth.currentSession())
              .getIdToken()
              .getJwtToken()}`
          }
        };
        var result = await API.get(apiName, path, myInit);
        setFiles(result); // set your files here
      } catch (e) {
        if (e.message === "Request failed with status code 502") {
          setApiError502(true);
        } else {
          alert(JSON.stringify(e));
          props.onLogout();
        }
      }
      return result;
    };
    // call getData
    getData();
  }, []);

  return (
    <div className="animated fadeIn">
      <div>
        {Array.isArray(files.Files) && files.Files.map(block => block.Day + ": " + block.file + "  ")}
      </div>
    </div>
  );
}

export default dailyFiles;

answered Mar 14, 2020 at 7:48

Junius L

16.2k6 gold badges61 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sallyerik Over a year ago

Works great!! I never thought even to use useEffect. Thanks!!

Sallyerik Over a year ago

What about if my json has more than one level. Would be possible to work with a nested array?

Sallyerik Over a year ago

When I change my Json to a complex json (more than one level) it doesn't work. I'm trying to understand why you use Array.isArray(files.Files) && which based on the documentation is for validate an array object. When I remove this part of the code it doesn't work. Could you explain a bit? Sorry for so many question I really new with this stuff.

Junius L Over a year ago

yes it checks if files.Files is array, if it's not it won't continue to render the items.

Ramesh Reddy · Accepted Answer · 2020-03-14 07:39:25Z

0

You're using a functional component so if you want to call the getData function you should just use getData().
Anyway, since getData() is asynchronous you should make few changes regarding how you use that inside the render function. For example, you can initially take a variable that has an empty array and once you get the data from the backend inside getData you can reassign that variable with the response data.

Actually you might want to call getData when your component loads for the first time so you can use Hooks for that. There are several other ways it all comes down to your preference.

answered Mar 14, 2020 at 7:39

Ramesh Reddy

10.7k3 gold badges22 silver badges38 bronze badges

Collectives™ on Stack Overflow

How can I call function from div and render the json object returned?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related