javascript - Unable to render data from API in React, no errors displayed

Question

I am using Django Rest Framework to send data to React app. But the data is being shown on screen. The code isnt returning any errors thus making it difficult to see whats going wrong. This is my second React project thus i am not too familiar with React & JS as of now. This is my code:

import { render } from "@testing-library/react";
import axios from "axios";
import React, { Component, useState, useEffect } from "react";

const api_url = "http://localhost:8000/api/CBView/"

class StocksHomePage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isFetching:false,
            data_s :[]
        };       
    }
    componendDidMount() {
        this.fetchData();
        this.timer = setInterval(() => this.fetchData(), 50);
    }
    fetchData = () => {
        this.setState({...this.state, isFetching:true});
        axios.get(api_url)
             .then (response => {
                 this.setState({data_s:response.data[0]})
             })
             .catch(e => {
                 console.log(e);
                 this.setState({...this.state, isFetching:false});
             });
    };

    render() {
        return (
            <div>
                {this.state.data_s.map(m => <p>{m.co_S}</p>)}
                {/* <p data={this.state.data_s.co_S} ></p> */}
                    <ul>
                        <li isKey dataField='co_N'></li>
                        <li dataField='co_S'></li>
                        <li dataField='price'></li>
                    </ul>
                    
                <p>{this.state.isFetching ? 'Fetching users...' : ''}</p>
            </div>
        )
    }
}

question from:https://stackoverflow.com/questions/65862264/unable-to-render-data-from-api-in-react-no-errors-displayed

Answer 1

I fixed the issue, all i had to do was include maps function with variable to represent those values. Here is my code:

class StocksHomePage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            loaded: false,
            placeholder: "loading"
        };
    }
    componentDidMount() {
        axios
             .get("http://localhost:8000/CBView")
             .then(response => {return response.data; })
             .then(data => {this.setState(() => {
                 return {data, loaded:true};
             });
            });
    }
    handleClick = (props) => {
        <HashRouter>
        <Route path='/StocksDetail' component={StocksDetail} />
        </HashRouter>
    };
    render() {
        return (
            <table className="table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Price/ Chng</th>
                        <th>Mkt Cap</th>
                        <th>Volume</th>
                        <th>Turnover</th>
                    </tr>
                </thead>
                <tbody>
                    {this.state.data.map(item => {
                        return (
                            <tr key={item.co_S}>
                                <button onCLick={this.handleClick(item.co_S)}><td >{item.co_N}</td></button>
                                <td>{item.price}</td>
                                <td>{item.p_chng_pc}</td>
                                <td>{item.Mkt_cap}</td>
                                <td>{item.volume}</td>
                                <td>{item.volume * item.price}</td>
                            </tr>
                        );
                    })};
                    
                </tbody>
            </table>
        );
    }
}

export default StocksHomePage;