CODEWITHSUNDEEP
javascriptreactjsajaxmern
Jason Bryant
Jason Bryant

Reputation: 85

Trying to display data to React

New to React, trying to display data (inside of a bootstrap modal) from MongoDB to React with an axios ajax request. Postman shows to be correct. React throws "TypeError: this.state.reviews.map is not a function", which tells me it is not an array since .map() is an array method, but Im saving the state as an array. Very confused on how to display data in React, can anyone give an example of how to do this correctly? Searched here, docs, google, still not understanding.

Postman result

import React from 'react';
import Axios from 'axios';
import Rater from 'react-rater';
import './comment-styles.scss';

export class CommentBox extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            reviews: []
        }
        this.addReview = this.addReview.bind(this);
    };


    addReview() {
        Axios({
            method: 'POST',
            url: 'http://localhost:8080/breakfast-tacos/reviews',
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(response => {
            this.setState({ reviews: [response.data.id] })      
        }).catch(error => console.log(error))
    }


    componentDidMount() {

        Axios.get('http://localhost:8080/breakfast-tacos/')
        .then(reviews => {
            this.setState({ reviews: reviews.data })
        })
        .catch(err => console.log(err))
    };



    render() {
        
        return (
            <div id="commentWrapper">
                <div className="commentHeader">
                    <h5>Leave a Rating!</h5>
                    <Rater style={{fontSize: '35px'}} />
                    <button id="submitRatingBtn" type="submit">Submit</button>

                    <form action="/breakfast-tacos" method="POST">
                        <textarea className="reviewTextBox" maxLength="250" placeholder="Write a review..." name="reviews"></textarea>
                        <button id="submitReviewBtn" type="submit" onClick={this.addReview}>Submit</button>
                    </form>

                </div>
                <hr />
                <div className="reviews">
                    <span className="user">
                        <h6>username:</h6>
                    </span>
                    <span className="text">
                        
                        {this.state.reviews.map((review, text) => {  
                                return (
                                    <p key={text}>
                                        {review} /*Where I want to display the data*/
                                    </p>
                                )
                            })}

                    </span>
                </div>
                <hr />
            </div>
        )
    }
};

Upvotes: 1

Views: 281

Answers (2)

Oge Obubu
Oge Obubu

Reputation: 69

You are still in the array. In order to map through the array, you need to locate the object properties.

addReview() {
        Axios({
            method: 'POST',
            url: 'http://localhost:8080/breakfast-tacos/reviews',
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(response => {
            this.setState({ reviews: [response.data.id] })      
        }).catch(error => console.log(error))
    }


    componentDidMount() {

        Axios.get('http://localhost:8080/breakfast-tacos/')
        .then(reviews => {
            this.setState({ reviews: reviews.data.reviews })
        })
        .catch(err => console.log(err))
    };

You should be able to map through the array now without seeing the error.

Upvotes: 0

Ajeet Shah
Ajeet Shah

Reputation: 19863

Response data is an object with property reviews which is an array, so you need to write:

componentDidMount() {

        Axios.get('http://localhost:8080/breakfast-tacos/')
        .then(reviews => {
            this.setState({ reviews: reviews.data.reviews })
        })
        .catch(err => console.log(err))
    };

And in JSX part:

{review.reviews}

because review is array element which is an object.

Upvotes: 1

Related Questions