CODEWITHSUNDEEP
reactjs
klonjy
klonjy

Reputation: 5

fetching data from server and show it in the html

In my react app I want to fetch data from a server and then to show it as list. even that I receive the data from the server still it's not presented in the html.

server returns json like:

{
   "files":["a.txt","b.txt","c.txt"]
}

here my code:

import React, { Component, useState, useEffect } from "react";
import ReactPlayer from "react-player";
import ListGroup from "react-bootstrap/ListGroup";
import "bootstrap/dist/css/bootstrap.css";

function Watch() {
  const [state, setState] = useState({});

  function getFiles() {
    fetch("http://localhost:5000/get_videos_list")
      .then(res => res.json())
      .then(
        (result) => {
          console.log(result)
          setState({ result });
        },
      
        (error) => {
          console.log(error);
        }
      )
  }

  useEffect(() => {
    getFiles();
  }, []);
  return (

    <React.Fragment>
      <ul className="list-group">
        {state.files&&state.files.map(listitem => (
          console.log('test')
       
          // <li className="list-group-item list-group-item-primary">
          //   {listitem}
          // </li>
          
        ))}
      </ul>
    </React.Fragment>
  );
}

export default Watch;

It doesn't print to the console 'test'

Upvotes: 0

Views: 200

Answers (1)

ValenciaHQ
ValenciaHQ

Reputation: 385

You are using

state.files

instead use:

state.result.files.

Regards.

Upvotes: 2

Related Questions