javascript/ReactJS: Show results from backend in a list

Question

I am sending a GET request on a Node API with a MongoDB server. I am getting the response as JSON in an array of object format. I want to show all those results in a list. Right now i am making a function like this

class VendorDashboard extends React.Component {
    constructor() {
      super();

      this.state = {

        paginationValue: '86',
        title: ""
      }

      this.handleLogout = this.handleLogout.bind(this);
      this.gotoCourse = this.gotoCourse.bind(this);
    }
    componentDidMount() {
        axios.get('/vendor/showcourses') //the api to hit request
          .then((response) => {
            console.log(response);
            let course = [];
            course = response.data.map((courseres) => {
              this.setState({
                title: courseres.title
              });
            })
          });

Right now what is happening is it is showing just one result. I want to show all results on that api. How can i do it?

you are overriding your title state in each iteration.That's why it is showing only last result — Sumit Kumar
– Sumit Kumar, Commented Mar 29, 2018 at 7:52

Tom Johnson · Accepted Answer · 2018-03-29 07:56:28Z

3

This segment here is overriding the title per course.

course = response.data.map((courseres) => {
          this.setState({
            title: courseres.title
          });
        })

You can keep the state as an array of titles and do;

course = response.data.map((courseres) => {
          return courseres.title;
        })

this.setState({titles: course});

And then you can repeat on the array of titles in your component. Like so in the render method;

const { titles } = this.state;
return <div>{titles.map((title, index) => <div key={index}>{title}</div>)}</div>

answered Mar 29, 2018 at 7:56

Tom Johnson

7015 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vijay Dev · Accepted Answer · 2018-03-29 08:05:03Z

You need to collect all the server response and set that as an array of data to the state and use this state data to render:

class VendorDashboard extends React.Component {
    constructor() {
        super();

        this.state = {
            paginationValue: '86',
            course: []
        }

        this.handleLogout = this.handleLogout.bind(this);
        this.gotoCourse = this.gotoCourse.bind(this);
    }

    componentDidMount() {
        axios.get('/vendor/showcourses') //the api to hit request
            .then((response) => {
                const course = response.data.map((courseres) => ({
                    id: courseres.id,
                    title: courseres.title
                }));

                this.setState({
                    course
                });
            });
    }

    render() {
        return (
            <ul>
                {
                    this.state.course.map((eachCourse) => {
                        return <li key={eachCourse.id}>{eachCourse.title}</li>
                    })
                }
            </ul>
        )
    }
}

Artem Mirchenko · Accepted Answer · 2018-03-29 08:00:25Z

0

In each map iteration you rewrite your piece of state, it is wrong. Just put courses in your state:

        console.log(response);
        this.setState({ courses: response.data });

In render method go through your state.courses:

render(){
  return(
   <div>
    {this.state.courses.map(course => <h2>{course.title}</h2>)}
   </div>
  );
}

answered Mar 29, 2018 at 8:00

Artem Mirchenko

2,1701 gold badge11 silver badges21 bronze badges

Collectives™ on Stack Overflow

javascript/ReactJS: Show results from backend in a list

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related