How to connect flask rest API output to react and display result

Question

I am doing inference using flask rest API and I got the result

{
result: {
predictions: -3.4333341121673584
} }

bypassing multiple args in the get as the URL I got the above result http://127.0.0.1:3000/predict?solute=CC(C)(C)Br&solvent=CC(C)(C)O Now I want to use this result to use in a react app.

I have written the code below

import { useState, useEffect } from "react";

function App() {
  const [state, setState] = useState({});

  useEffect(() => {
    fetch("api/")
      .then((response) => {
        if (response.status == 200) {
          return response.json();
        }
      })
      .then((data) => console.log(data))
      .then((error) => console.log(error));
  });

I have written the following using a tutorial on the internet. I am new to using fetch API or Axios. Need help to get this result in react app

entropyfeverone · Accepted Answer · 2021-11-11 08:51:27Z

2

import { useState, useEffect } from "react";

function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch("http://127.0.0.1:3000/predict?solute=CC(C)(C)Br&solvent=CC(C)(C)O")
      .then((response) => {
        if (response.status == 200) {
          return response.json();
        }
      })
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, []);

  if (loading) {
    return <p>Loading</p>
  }

  if (error) {
    return <p>{JSON.stringify(error)}</p>
  }

  return <p>{JSON.stringify(data)}</p>
}

edited Nov 11, 2021 at 8:51

answered Nov 10, 2021 at 16:49

entropyfeverone

1,6743 gold badges11 silver badges27 bronze badges

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

1 Comment

harsh Over a year ago

C:\Users\MAHESH\Desktop\connectapp\newapp\src\App.js: Unexpected token, expected "," (8:2) 6 | const [data, setData] = useState(null) 7 | const [loading, setLoading = useState(true) > 8 | const [error, setError] = useState(null) | ^

Collectives™ on Stack Overflow

How to connect flask rest API output to react and display result

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related