Search code examples
reactjsreact-hooksreact-bootstrap

array object working if we hardcode data but not working when we populate data from Node js to react js

I have array object in react Js, when I hardcode the data in React js and execute it is working, same data sending from Node JS and in React JS it is not displaying.

Please see the codesandbox link, my code working https://codesandbox.io/s/reactbootstrapcarousel-forked-4selu?file=/src/index.js.

import React,{useState} from "react";
import ReactDOM from "react-dom";
import { Carousel } from "react-bootstrap";

import "bootstrap/dist/css/bootstrap.css";
import "./styles.css";

function App() {
  const [eventList, setEventList] = useState([{
                                    eventName: 'Sankranti',
                                    eventDate: '2021-01-21T00:00:00.000Z',
                                    merchantid: 'tp012345'
                                  },
                                  {
                                    eventName: 'Sankranti 1',
                                    eventDate: '2021-01-26T00:00:00.000Z',
                                    merchantid: 'tp012345'
                                  }])
  const eventListRender = eventList.length > 0 ?
                          eventList.map((item,index) => { 
                          return <Carousel.Item>{item.eventName}</Carousel.Item>
                          }) :
                          <Carousel.Item>No upcoming events</Carousel.Item>
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <Carousel>
          {eventListRender}
      </Carousel>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Same code not working when I am passing data from Node JS to React JS via axios, but data is coming from Node JS to React JS. It shows as undefined ( item event name: undefined.)

Please find my code.

import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import Carousel from 'react-bootstrap/Carousel'
import axios from 'axios';
import DashboardNavBar from './DashboardNavBar';
import Header from './Header';

const DashboardPage = (props) => {
    const [eventList, setEventList] = useState([])
    const [index, setIndex] = useState()

    if (!props.profileData) {
        useEffect(() => {
            (async () => {
                const eventsList = await axios.get(
                    "http://localhost:3000/api/dashboard"
                );
                    console.log(eventsList.data)
                    const response = eventsList.data
                    setEventList(eventList => [...eventList, response])
                    if(!response){
                        setErrorMsg('Please create Event and then add User !!')
                    }
            })();
        }, []);
    }

    const eventListRender = eventList.length > 0 ?
                          eventList.map((item,index) => { 
                              console.log('item event name: ', item.eventName)
                          return <Carousel.Item>{item.eventName}</Carousel.Item>
                          }) :
                          <Carousel.Item>No upcoming events</Carousel.Item>

    return (
        <div>
            <DashboardNavBar />
            <Header />
            <p >Welcome !!!!!!</p>
            <Carousel>
                {eventListRender}
            </Carousel>
        </div>
    );
}

const mapStateToProps = (state) => ({
    profileData: state.auth.profileData
})

export default connect(mapStateToProps) (DashboardPage);

Please find console result for above code. enter image description here

Solution

  • You need to spread your API result as well, because it is an array:

    setEventList(eventList => [...eventList, ...response])