Trying to display data to React

by

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>
        )
    }
};

134 thoughts on “Trying to display data to React”

Leave a Comment