Axios Uncaught TypeError: Cannot read property 'map' of undefined

0
votes

I'm trying to display data from my API in a React App with Axios.

I've created a simple method that connects to the REST API.

import axios from 'axios';
const API_URL = 'http://127.0.0.1:8888';

export default class ReviewAPI{
    getQuestions(title) {
        const url = `${API_URL}/api/questions/?title=${title}`;
        return axios.get(url).then(response => response.data);
    }
}

When I make the API call it returns back the response but as a Promise.

enter image description here

When I try to map through the response I get `cannot read property map of undefined' 

export default function Questions({ response, setData, formData}) {
return (
    <Card className="m-3">
        <Card.Header>{response.description}</Card.Header>
        <Card.Body>
            { response.questions.map((question, idx) => {
                switch (question.type) {
                    case "text": return <FormText key={idx} question={question} setData={setData} formData={formData}/>;
                    case "textarea": return <FormTextArea key={idx} question={question} setData={setData} formData={formData}/>;
                    case "radio": return <RadioGroup key={idx} question={question} setData={setData} formData={formData}/>;
                    case "multiselect": return <MultiSelect key={idx} question={question} setData={setData} formData={formData}/>;
                    default: return [];
                }
            })}
        </Card.Body>
    </Card>
);

}
2
javascriptreactjsaxios
it means response.questions is not an array. How are you passing the response to the questions function? – carrany
Also, if response is a Promise, wouldn't you need to use .then to get the inner value? I'm also unsure whether you're returning the value correctly from the original function because I think you need a return inside the callback in the return statement (stackoverflow.com/questions/42831393/…). – Arnav Borborah
I'm passing the response by calling the method like this <Questions response={reviewAPI.getQuestions()} setData={setData} formData={formData}/> – ssk
I did as you suggested, and I'm still getting the same result... <Questions response={reviewAPI.getQuestions().then(function(value){return value})} setData={setData} formData={formData}/> – ssk
@ssk, I meant that you should put the return like return axios.get(url).then(response => return response.data) combined with what is done in @Ahmed's answer. – Arnav Borborah

2 Answers

1
votes

rewrite it like so: 

getQuestions(title) {
            const url = `${API_URL}/api/questions/?title=${title}`;
            let data;
             axios.get(url).then(response => {data = response.data});
           return data
        }

when you call the reviewAPI.getQuestions(), all you will get is the data returned;

0
votes

You need to await the promise before you can map over the items.

In a functional component you need to do this:

const questions = () => {
  const [questions, setQuestions] = useState([]);

  useEffect(async () => {
       const res= await reviewAPI.getQuestions();

       setQuestions(res.data);
   }, []);

   return 
      <Questions 
         response={questions} 
         setData={setData} 
         formData={formData}/>
}