0

I am getting my output in a react app at this.state but I want to bring this outside and populate div so that I can show it at the frontend. How can I do it?

 fetch("https://flask-api-test1.herokuapp.com/predict", {
      method: "post",
      body: formData,
    })
      .then((res) => res.json())
      .then((result) => {
        console.log(state);
      })
      .catch((err) => {
        console.log(err);
      });

output from the api

harsh
  • 435
  • 2
  • 6
  • 13

3 Answers3

1

Your example is a bit incomplete. Anyways, here is how I would do that if the returned data was an array https://codesandbox.io/s/mutable-leftpad-o3v30?file=/src/App.js

  • when I am passing fetchData to an h1 or div tag then I am getting this error. ```react-dom.development.js:13231 Uncaught Error: Objects are not valid as a React child (found: object with keys {result}). If you meant to render a collection of children, use an array instead.``` – harsh Nov 12 '21 at 14:33
  • I have attached the pic from the API output from console.log(data) @aetheode – harsh Nov 12 '21 at 14:35
  • Updated that code on codesandbox (https://codesandbox.io/s/mutable-leftpad-o3v30?file=/src/App.js) –  Nov 12 '21 at 15:21
1

If you can use hooks then the simplest solution is useState

import {useState} from 'react'

declare

const [newState, setNewState] = useState()

then you try

 fetch("https://flask-api-test1.herokuapp.com/predict", {
      method: "post",
      body: formData,
    })
      .then((res) => res.json())
      .then((result) => {
        setNewState(result)
        console.log(JSON.stringify(result));
      })
      .catch((err) => {
        console.log(err);
      });

and you can use ready-made 'newState' for div in jsx like

<div>
 {newState?.keyDataYouNeed}
</div>
ironCat
  • 161
  • 6
  • ```react-dom.development.js:13231 Uncaught Error: Objects are not valid as a React child (found: object with keys {result}). If you meant to render a collection of children, use an array instead.``` I am getting this error – harsh Nov 12 '21 at 14:21
  • ```result: predictions: -3.5411367416381836 [[Prototype]]: Object [[Prototype]]: Object``` This is my output from console.log(data) – harsh Nov 12 '21 at 14:22
  • Why guys keep assigning values like this, `this.state = result;` THATS HUGH WRONG, do this, `setNewState(result)` man, clearly hes not using react hooks, – Ashish Kamble Nov 12 '21 at 14:42
  • 1
    @AshishKamble Yes, I have removed `this.state = result`; and I am using useState – harsh Nov 12 '21 at 14:50
  • 1
    @harsh "Uncaught Error: Objects are not valid as a React child" you get this error because in the "result" you have an object, and the react cannot simply display it as well as the console.log if if you need to see in the console try ```console.log(JSON.stringify(newState.result))``` if if you need to get predictions from result in JSX try ```
    {newState?.result?.predictions}
    ```     – ironCat Nov 12 '21 at 23:17
0

never do this.state and assign values directly, as its immutable, what you can do is ,

fetch("https://flask-api-test1.herokuapp.com/predict", {
  method: "post",
  body: formData,
})
  .then((res) => res.json())
  .then((result) => {
    this.setState({data:result});
    console.log(result);
  })
  .catch((err) => {
    console.log(err);
  });
Ashish Kamble
  • 2,555
  • 3
  • 21
  • 29