title: How can I map my fetched data to card component
body: <p>I'm building a quiz app and using some API to fetch data, the response that I get back after making a GET request is something like this</p>
  <pre><code>[
      {
          &quot;id&quot;: 910,
          &quot;question&quot;: &quot;What used to be called a minion in Kubernetes cluster?&quot;,
          &quot;description&quot;: null,
          &quot;answers&quot;: {
              &quot;answer_a&quot;: &quot;A component of the master node.&quot;,
              &quot;answer_b&quot;: &quot;A monitoring engine used widely in Kubernetes.&quot;,
              &quot;answer_c&quot;: &quot;Docker container service.&quot;,
              &quot;answer_d&quot;: &quot;A worker node.&quot;,
              &quot;answer_e&quot;: null,
              &quot;answer_f&quot;: null
          },
          &quot;multiple_correct_answers&quot;: &quot;false&quot;,
          &quot;correct_answers&quot;: {
              &quot;answer_a_correct&quot;: &quot;false&quot;,
              &quot;answer_b_correct&quot;: &quot;false&quot;,
              &quot;answer_c_correct&quot;: &quot;false&quot;,
              &quot;answer_d_correct&quot;: &quot;true&quot;,
              &quot;answer_e_correct&quot;: &quot;false&quot;,
              &quot;answer_f_correct&quot;: &quot;false&quot;
          },
          &quot;correct_answer&quot;: null,
          &quot;explanation&quot;: null,
          &quot;tip&quot;: null,
          &quot;tags&quot;: [
              {
                  &quot;name&quot;: &quot;Kubernetes&quot;
              }
          ],
          &quot;category&quot;: &quot;DevOps&quot;,
          &quot;difficulty&quot;: &quot;Medium&quot;
      },
      {
          &quot;id&quot;: 1019,
          &quot;question&quot;: &quot;Is Kubernetes open-source?&quot;,
          &quot;description&quot;: null,
          &quot;answers&quot;: {
              &quot;answer_a&quot;: &quot;True&quot;,
              &quot;answer_b&quot;: &quot;False&quot;,
              &quot;answer_c&quot;: null,
              &quot;answer_d&quot;: null,
              &quot;answer_e&quot;: null,
              &quot;answer_f&quot;: null
          },
          &quot;multiple_correct_answers&quot;: &quot;false&quot;,
          &quot;correct_answers&quot;: {
              &quot;answer_a_correct&quot;: &quot;true&quot;,
              &quot;answer_b_correct&quot;: &quot;false&quot;,
              &quot;answer_c_correct&quot;: &quot;false&quot;,
              &quot;answer_d_correct&quot;: &quot;false&quot;,
              &quot;answer_e_correct&quot;: &quot;false&quot;,
              &quot;answer_f_correct&quot;: &quot;false&quot;
          },
          &quot;correct_answer&quot;: null,
          &quot;explanation&quot;: null,
          &quot;tip&quot;: null,
          &quot;tags&quot;: [
              {
                  &quot;name&quot;: &quot;Kubernetes&quot;
              }
          ],
          &quot;category&quot;: &quot;DevOps&quot;,
          &quot;difficulty&quot;: &quot;Easy&quot;
      },
      {
          &quot;id&quot;: 1010,
          &quot;question&quot;: &quot;While starting minikube, a configuration file, gets created by default inside what directory on Linux?&quot;,
          &quot;description&quot;: null,
          &quot;answers&quot;: {
              &quot;answer_a&quot;: &quot;/tmp&quot;,
              &quot;answer_b&quot;: &quot;/home/user/.kube&quot;,
              &quot;answer_c&quot;: &quot;/root&quot;,
              &quot;answer_d&quot;: &quot;/home/user&quot;,
              &quot;answer_e&quot;: null,
              &quot;answer_f&quot;: null
          },
          &quot;multiple_correct_answers&quot;: &quot;false&quot;,
          &quot;correct_answers&quot;: {
              &quot;answer_a_correct&quot;: &quot;false&quot;,
              &quot;answer_b_correct&quot;: &quot;true&quot;,
              &quot;answer_c_correct&quot;: &quot;false&quot;,
              &quot;answer_d_correct&quot;: &quot;false&quot;,
              &quot;answer_e_correct&quot;: &quot;false&quot;,
              &quot;answer_f_correct&quot;: &quot;false&quot;
          },
          &quot;correct_answer&quot;: null,
          &quot;explanation&quot;: null,
          &quot;tip&quot;: null,
          &quot;tags&quot;: [
              {
                  &quot;name&quot;: &quot;Kubernetes&quot;
              }
          ],
          &quot;category&quot;: &quot;DevOps&quot;,
          &quot;difficulty&quot;: &quot;Medium&quot;
      },
      {
          &quot;id&quot;: 962,
          &quot;question&quot;: &quot;Which of the following are true for a pod in Kubernetes?&quot;,
          &quot;description&quot;: null,
          &quot;answers&quot;: {
              &quot;answer_a&quot;: &quot;A Pod represents processes running on your Cluster&quot;,
              &quot;answer_b&quot;: &quot;Pods are the simplest units in the Kubernetes object model that you create or deploy&quot;,
              &quot;answer_c&quot;: &quot;A pod is the same as a container&quot;,
              &quot;answer_d&quot;: &quot;You can have only 1 container running in 1 pod&quot;,
              &quot;answer_e&quot;: null,
              &quot;answer_f&quot;: null
          },
          &quot;multiple_correct_answers&quot;: &quot;true&quot;,
          &quot;correct_answers&quot;: {
              &quot;answer_a_correct&quot;: &quot;true&quot;,
              &quot;answer_b_correct&quot;: &quot;true&quot;,
              &quot;answer_c_correct&quot;: &quot;false&quot;,
              &quot;answer_d_correct&quot;: &quot;false&quot;,
              &quot;answer_e_correct&quot;: &quot;false&quot;,
              &quot;answer_f_correct&quot;: &quot;false&quot;
          },
          &quot;correct_answer&quot;: null,
          &quot;explanation&quot;: null,
          &quot;tip&quot;: null,
          &quot;tags&quot;: [
              {
                  &quot;name&quot;: &quot;Kubernetes&quot;
              }
          ],
          &quot;category&quot;: &quot;DevOps&quot;,
          &quot;difficulty&quot;: &quot;Medium&quot;
      },
      {
          &quot;id&quot;: 1018,
          &quot;question&quot;: &quot;Which Process Validates And Configures Data For The Api Objects Like Pods, Services?&quot;,
          &quot;description&quot;: null,
          &quot;answers&quot;: {
              &quot;answer_a&quot;: &quot;kube-apiserver process validates and configures data for the api objects.&quot;,
              &quot;answer_b&quot;: &quot;kube-apiserver process validates and configures data for the gui objects.&quot;,
              &quot;answer_c&quot;: &quot;kube-apiserver process validates and configures data for the cli objects.&quot;,
              &quot;answer_d&quot;: null,
              &quot;answer_e&quot;: null,
              &quot;answer_f&quot;: null
          },
          &quot;multiple_correct_answers&quot;: &quot;false&quot;,
          &quot;correct_answers&quot;: {
              &quot;answer_a_correct&quot;: &quot;true&quot;,
              &quot;answer_b_correct&quot;: &quot;false&quot;,
              &quot;answer_c_correct&quot;: &quot;false&quot;,
              &quot;answer_d_correct&quot;: &quot;false&quot;,
              &quot;answer_e_correct&quot;: &quot;false&quot;,
              &quot;answer_f_correct&quot;: &quot;false&quot;
          },
          &quot;correct_answer&quot;: null,
          &quot;explanation&quot;: null,
          &quot;tip&quot;: null,
          &quot;tags&quot;: [
              {
                  &quot;name&quot;: &quot;Kubernetes&quot;
              }
          ],
          &quot;category&quot;: &quot;DevOps&quot;,
          &quot;difficulty&quot;: &quot;Easy&quot;
      },
      {
          &quot;id&quot;: 966,
          &quot;question&quot;: &quot;What is the purpose of a ReplicaSet?&quot;,
          &quot;description&quot;: null,
          &quot;answers&quot;: {
              &quot;answer_a&quot;: &quot;To prevent clones from invading other clusters&quot;,
              &quot;answer_b&quot;: &quot;To monitor and respond to environmental latency&quot;,
              &quot;answer_c&quot;: &quot;To maintain a stable set of replica Pods running at any given time&quot;,
              &quot;answer_d&quot;: &quot;To create and maintain volumes&quot;,
              &quot;answer_e&quot;: null,
              &quot;answer_f&quot;: null
          },
          &quot;multiple_correct_answers&quot;: &quot;false&quot;,
          &quot;correct_answers&quot;: {
              &quot;answer_a_correct&quot;: &quot;false&quot;,
              &quot;answer_b_correct&quot;: &quot;false&quot;,
              &quot;answer_c_correct&quot;: &quot;true&quot;,
              &quot;answer_d_correct&quot;: &quot;false&quot;,
              &quot;answer_e_correct&quot;: &quot;false&quot;,
              &quot;answer_f_correct&quot;: &quot;false&quot;
          },
          &quot;correct_answer&quot;: null,
          &quot;explanation&quot;: null,
          &quot;tip&quot;: null,
          &quot;tags&quot;: [
              {
                  &quot;name&quot;: &quot;Kubernetes&quot;
              }
          ],
          &quot;category&quot;: &quot;DevOps&quot;,
          &quot;difficulty&quot;: &quot;Easy&quot;
      },
      {
          &quot;id&quot;: 1052,
          &quot;question&quot;: &quot;What does 'become: yes' mean in Ansible playbooks?&quot;,
          &quot;description&quot;: null,
          &quot;answers&quot;: {
              &quot;answer_a&quot;: &quot;It means that the command must be retried until it succeeds&quot;,
              &quot;answer_b&quot;: &quot;It means that the service needs to be started once installed&quot;,
              &quot;answer_c&quot;: &quot;It means that the worker node should become a manager node&quot;,
              &quot;answer_d&quot;: &quot;It means that we would run all commands as root&quot;,
              &quot;answer_e&quot;: null,
              &quot;answer_f&quot;: null
          },
          &quot;multiple_correct_answers&quot;: &quot;false&quot;,
          &quot;correct_answers&quot;: {
              &quot;answer_a_correct&quot;: &quot;false&quot;,
              &quot;answer_b_correct&quot;: &quot;false&quot;,
              &quot;answer_c_correct&quot;: &quot;false&quot;,
              &quot;answer_d_correct&quot;: &quot;true&quot;,
              &quot;answer_e_correct&quot;: &quot;false&quot;,
              &quot;answer_f_correct&quot;: &quot;false&quot;
          },
          &quot;correct_answer&quot;: &quot;answer_a&quot;,
          &quot;explanation&quot;: null,
          &quot;tip&quot;: null,
          &quot;tags&quot;: [
              {
                  &quot;name&quot;: &quot;DevOps&quot;
              }
          ],
          &quot;category&quot;: &quot;DevOps&quot;,
          &quot;difficulty&quot;: &quot;Easy&quot;
      },
      {
          &quot;id&quot;: 1017,
          &quot;question&quot;: &quot;What Is The Use Of Kube-controller-manager?&quot;,
          &quot;description&quot;: null,
          &quot;answers&quot;: {
              &quot;answer_a&quot;: &quot;kube-controller-manager embeds the core control loop which is a non-terminating loop that regulates the state of the system.&quot;,
              &quot;answer_b&quot;: &quot;kube-controller-manager embeds the core control loop which is a terminating loop that regulates the state of the system.&quot;,
              &quot;answer_c&quot;: null,
              &quot;answer_d&quot;: null,
              &quot;answer_e&quot;: null,
              &quot;answer_f&quot;: null
          },
          &quot;multiple_correct_answers&quot;: &quot;false&quot;,
          &quot;correct_answers&quot;: {
              &quot;answer_a_correct&quot;: &quot;true&quot;,
              &quot;answer_b_correct&quot;: &quot;false&quot;,
              &quot;answer_c_correct&quot;: &quot;false&quot;,
              &quot;answer_d_correct&quot;: &quot;false&quot;,
              &quot;answer_e_correct&quot;: &quot;false&quot;,
              &quot;answer_f_correct&quot;: &quot;false&quot;
          },
          &quot;correct_answer&quot;: null,
          &quot;explanation&quot;: null,
          &quot;tip&quot;: null,
          &quot;tags&quot;: [
              {
                  &quot;name&quot;: &quot;Kubernetes&quot;
              }
          ],
          &quot;category&quot;: &quot;DevOps&quot;,
          &quot;difficulty&quot;: &quot;Medium&quot;
      },
      {
          &quot;id&quot;: 922,
          &quot;question&quot;: &quot;What is the role of kube-apiserver and kube-scheduler?&quot;,
          &quot;description&quot;: null,
          &quot;answers&quot;: {
              &quot;answer_a&quot;: &quot;The kube – apiserver follows the scale-out architecture and, is the front-end of the master node control panel.&quot;,
              &quot;answer_b&quot;: &quot;The kube – apiserver follows the scale-out architecture and, is the back-end of the master node control panel.&quot;,
              &quot;answer_c&quot;: null,
              &quot;answer_d&quot;: null,
              &quot;answer_e&quot;: null,
              &quot;answer_f&quot;: null
          },
          &quot;multiple_correct_answers&quot;: &quot;false&quot;,
          &quot;correct_answers&quot;: {
              &quot;answer_a_correct&quot;: &quot;true&quot;,
              &quot;answer_b_correct&quot;: &quot;false&quot;,
              &quot;answer_c_correct&quot;: &quot;false&quot;,
              &quot;answer_d_correct&quot;: &quot;false&quot;,
              &quot;answer_e_correct&quot;: &quot;false&quot;,
              &quot;answer_f_correct&quot;: &quot;false&quot;
          },
          &quot;correct_answer&quot;: null,
          &quot;explanation&quot;: null,
          &quot;tip&quot;: null,
          &quot;tags&quot;: [
              {
                  &quot;name&quot;: &quot;Kubernetes&quot;
              }
          ],
          &quot;category&quot;: &quot;DevOps&quot;,
          &quot;difficulty&quot;: &quot;Medium&quot;
      },
      {
          &quot;id&quot;: 923,
          &quot;question&quot;: &quot;What is ETCD?&quot;,
          &quot;description&quot;: null,
          &quot;answers&quot;: {
              &quot;answer_a&quot;: &quot;Etcd is written in Go programming language and is a distributed key-value store used for coordinating between distributed work.&quot;,
              &quot;answer_b&quot;: &quot;Etcd is written in Python programming language and is a distributed key-value store used for coordinating between distributed work.&quot;,
              &quot;answer_c&quot;: &quot;Etcd is written in C++ programming language and is a distributed key-value store used for coordinating between distributed work.&quot;,
              &quot;answer_d&quot;: null,
              &quot;answer_e&quot;: null,
              &quot;answer_f&quot;: null
          },
          &quot;multiple_correct_answers&quot;: &quot;false&quot;,
          &quot;correct_answers&quot;: {
              &quot;answer_a_correct&quot;: &quot;true&quot;,
              &quot;answer_b_correct&quot;: &quot;false&quot;,
              &quot;answer_c_correct&quot;: &quot;false&quot;,
              &quot;answer_d_correct&quot;: &quot;false&quot;,
              &quot;answer_e_correct&quot;: &quot;false&quot;,
              &quot;answer_f_correct&quot;: &quot;false&quot;
          },
          &quot;correct_answer&quot;: null,
          &quot;explanation&quot;: null,
          &quot;tip&quot;: null,
          &quot;tags&quot;: [
              {
                  &quot;name&quot;: &quot;Kubernetes&quot;
              }
          ],
          &quot;category&quot;: &quot;DevOps&quot;,
          &quot;difficulty&quot;: &quot;Easy&quot;
      }
  ]
  </code></pre>
  <p>when I try to log the <code>response.data</code> it works good but when I try to log the question of my first element with <code>console.log(ques[0])</code> it doesn't works. Here is my code :</p>
  <pre><code>const [ques, setQues] = useState([]);
      const loadedQues = [];
  
      
      const fetch = async() =&gt; {
          const response = await axios.get(`https://quizapi.io/api/v1/questions?
          apiKey=${process.env.REACT_APP_QUIZ_API_KEY}
          &amp;limit=10
          &amp;category=DevOps`
          )
          let rawData = response.data;
          rawData.map((item)=&gt;{loadedQues.push(item)});
      }
      useEffect(()=&gt;{ 
          try{
              fetch();
              setQues(loadedQues);    
              console.log(ques[0]);
          }
          catch(error){
              console.log(error);
          }
      }, []);
  </code></pre>