javascript - show api data to frontend(poll) using reactjs

Question

I want to fetch data from API and show frontend using react but I am getting error from frontend side which is (TypeError: answers.map is not a function ) so how can I solve this error --

MY CODE IS -

import React, { useState, useEffect } from "react";
import Poll from "react-polls";
import { getPolls } from "../helper/coreapicalls";

const MainPoll = () => {
  const [polls, setPoll] = useState([]);
  const [error, seterror] = useState(false);
  // Setting answers to state to reload the component with each vote
  const [pollAnswers, setPollAnswers] = useState([]);

  useEffect(() => {
    loadPoll();
  }, []);

  const loadPoll = () => {
    getPolls().then((data) => {
      if (data.error) {
        seterror(data.error);
      } else {
        setPoll(data);
        console.log(data);
      }
    });
  };

  // Handling user vote
  // Increments the votes count of answer when the user votes

  return (
    <div className="">
      <div className="container">
        <h1 className="blog_heading">Poll's of the Day</h1>
        <div className="row">
          {polls.reverse().map((poll, index) => (
            <div className="col-lg-4 col-12" key={index}>
              <Poll question={poll.question} answers={poll.options} />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default MainPoll;

Data which I am getting from API is- enter image description here

Here I have Question , 3 options how can I show to frontend

Error -enter image description here

question from:https://stackoverflow.com/questions/65952560/show-api-data-to-frontendpoll-using-reactjs

Answer 1

The problem is:

field options from the API is an object as I see.

But Poll component trying to interact with it like it is an Array: answers.map(answer => answer.option)

As I see from the doc, data format should be:

[
  { option: 'Yes', votes: 8 },
  { option: 'No', votes: 2 }
]

UPDATE: you can use a similar snippet to transform your data into the required format.

data.map(answer => {
  return {
    question: answer.question,
    answers: Object.keys(answer.options).map(key => {return {option: key, votes: 0}})
  }
})