CODEWITHSUNDEEP
reactjsaxios
nabs
nabs

Reputation: 35

How to show list of data from GET-request

Im trying to get the data from my server by clicking on the Get studentData. As shown in the picture from the browser of the console, I'm getting the data but the data is not displayed in the browser. Browser image

And this is my code for the get data component:

import React, { useState } from 'react';
import axios from 'axios'

export default function Datateacher() {
  const [result, setResult] = useState([]);

  const handleClick = async () => {
    const fetchData = async () => {
      const result = await axios.get(`http://localhost:8000/state`, { mode: 'no-cors' });
      console.log(result.data)
      setResult(result.data)
    }
    fetchData();
  };

  return (
    <div>
      <button type="button" onClick={handleClick} >
        Get studentdata
      </button>
      <ul>
        <h3>
          {result.map(results => results.data)}
        </h3>
      </ul>
    </div>
  )
}

Upvotes: 1

Views: 1732

Answers (6)

Youssouf Oumar
Youssouf Oumar

Reputation: 45865

You are not mapping through your result state correctly (there is no data field on your items). Find below an example for having the names of students displayed:

import React, { useState } from "react";
import axios from "axios";

export default function Datateacher() {
  const [result, setResult] = useState([]);

  const handleClick = async () => {
    const fetchData = async () => {
      const result = await axios.get(`http://localhost:8000/state`, { mode: "no- cors" });

      console.log(result.data);
      setResult(result.data);
    };

    fetchData();
  };

  return (
    <div>
      <button type="button" onClick={handleClick}>
        Get studentdata
      </button>
      <ul>
        <h3>
          {result.map((item) => (
            <p>{item.name}</p>
          ))}
        </h3>
      </ul>
    </div>
  );
}

Upvotes: 0

nabs
nabs

Reputation: 35

Im sorry about the bad code-post, because i cant clearly see fetchData() is totally unnecessary, it was because i used another method before. But it is working now, it was the data property that gave problem, thanks!

Upvotes: 0

Mathieu Rios
Mathieu Rios

Reputation: 386

Couple of things are wrong in your provided code.

First of all, why your fetchData() function is located within the handleClick() one ?

You can remove your handleClick() function. It is not necessary because it's just used to call another function (fetchData()) in your case.

const fetchData = async () => {
  const result = await axios.get(`http://localhost:8000/state`, { mode: 'no-cors' });
  setResult(result.data) 
};

So, on your button click, you just call fetchData().

Also, your state should be [results, setResults] as you are retrieving multiple items (readability is something important).

Then you map your elements like so :

results.map(result => result)

First you have a collection that you iterate over, then you have one item.

Last thing, you're trying to get a key named data in your result item which doesn't exist. Try result.id instead.

Upvotes: 1

Georgy
Georgy

Reputation: 1939

You are trying to render data field which doesn't exist in your result.

Try something like this:

<h3>
 {
   result.map(item => item.id)
 }
</h3>

Upvotes: 1

praskulkarni88
praskulkarni88

Reputation: 65

You are getting data as an array of student objects. If you want to display data then you need to parse the array and then the individual object properties. For ex: results.data[0].id this would display the id of first student object.

Upvotes: 0

Pradip Dhakal
Pradip Dhakal

Reputation: 1962

There are lots of places that you need to improve to run your code,

  1. You're not returning the data from your map function. You need to return the JSXElement from your map.

  2. You are creating unnecessary method fetchData.

Here is your working code:

import { useState } from 'react';
import axios from 'axios'

export default function Datateacher() {
  const [result, setResult] = useState([]);

  const handleClick = async () => {
    const result = await axios.get(`http://localhost:8000/state`, { mode: 'no-cors' });
    setResult(result.data)
  };

  return (
    <div>
      <button type="button" onClick={handleClick} >
        Get studentdata
      </button>
      <ul>
        {result.map((result) => <h1>{result.data}</h1>)}
      </ul>
    </div>
  )
}

Upvotes: 2

Related Questions