How to map this given api response in react js javascript

Question

I am getting an error when i was calling an post request in use effect hook and i got the response as promise pending, but the object is there, please see the response and please provide a perfect code to map this response.

code

function Comment({ id }) {
    const [data, setdata] = useState([]);
    console.log(id);
    useEffect(() => {
        const query = `
    query{
      forumAnswerId(id:${id}){
        forumAnswerBody
        forumAnswerTime
        forumAnswerCode1
        forumAnswerCode2
        forumAnswerCode3
        forumAnswerAuthor
        forumAnswerBoolean
        forumAnswerCode1Title
        forumAnswerCode2Title
        forumAnswerCode3Title
      }
      forumComment(forumAnswerComment:${id}){
        forumAnswerCommentPost
        forumAnswerCommentBody
        forumAnswerCommentAuthor
        forumAnswerCommentTime
        
      }
    }
  `;

        const opts = {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ query }),
        };
        const res = fetch('http://127.0.0.1:8000', opts).then((res) => res.json());

        setdata(res);
    }, []);
    return <div></div>;
}

export default Comment;

This is a promise so you either need to use .then() or async-await to get the data and then map over it... — DecPK
– DecPK, Commented Jun 10, 2021 at 4:46

tuan nguyen · Accepted Answer · 2021-06-10 04:51:28Z

2

here you are:

fetch('http://127.0.0.1:8000', opts)
    .then((res) => res.json())
    .then(r=> setdata(r))

answered Jun 10, 2021 at 4:51

tuan nguyen

3862 silver badges8 bronze badges

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

2 Comments

Rohan Bagchi Over a year ago

Alternatively, use async await. Personally I find it easier to read. ``` const res = await fetch('127.0.0.1:8000', opts); const resJson = await res.json(); setData(resJson); ```

tuan nguyen Over a year ago

@RohanBagchi of course, there are two ways, if you use async-await , you have to add async to the function where you call it

Nithin K Joy · Accepted Answer · 2021-06-10 04:53:56Z

0

promise result cannot be accessed outside. You need to set data inside the then function

Using Promise

fetch('http://127.0.0.1:8000', opts).then((res) => setdata(res.json()));

Using Async await

const res=await fetch('http://127.0.0.1:8000', opts)
setdata(res.json())

answered Jun 10, 2021 at 4:53

Nithin K Joy

97312 silver badges17 bronze badges

Comments

Rajdeep D · Accepted Answer · 2021-06-10 04:54:40Z

useEffect(() => {
    const fetchData = async () => {
const query = `
query{
  forumAnswerId(id:${id}){
    forumAnswerBody
    forumAnswerTime
    forumAnswerCode1
    forumAnswerCode2
    forumAnswerCode3
    forumAnswerAuthor
    forumAnswerBoolean
    forumAnswerCode1Title
    forumAnswerCode2Title
    forumAnswerCode3Title
  }
  forumComment(forumAnswerComment:${id}){
    forumAnswerCommentPost
    forumAnswerCommentBody
    forumAnswerCommentAuthor
    forumAnswerCommentTime
    
  }
};`

const opts = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ query }),
    };
    const res = await fetch('http://127.0.0.1:8000', opts).then((res) => res.json());

    setdata(res);
}

fetchData();

}, []);

Collectives™ on Stack Overflow

How to map this given api response in react js javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related