map function not rendering jsx? Error: Objects are not valid as a React child

Question

I'm working on the comments feature of my assignment. I'm trying to display the author name of the comments from my object. However, my map function doesnt seem to be working as whenever I click the button I get an error saying Error: Objects are not valid as a React child (found: object with keys {roles, _id, username, email, password, __v}). If you meant to render a collection of children, use an array instead. Error: Objects are not valid as a React child (found: object with keys {roles, _id, username, email, password, __v}). If you meant to render a collection of children, use an array instead.

Reviews,js

import React, {useState, useRef} from 'react';
import Axios from 'axios';
import {Button, Input} from 'antd';
import authService from '../../services/auth.service'
import authHeader from '../../services/auth-header';
import FirstReview from './FirstReview';

const {TextArea} = Input;

const Reviews = (props) => {

    const currentUser = authService.getCurrentUser();

    const [review, setReview] = useState('');

    const handleChange = (e) => {
        setReview(e.target.value)
    }

    const onSubmit = (e) => {
        e.preventDefault();

        const variables = {
            movieId: props.movieId,
            content: review,
            author: currentUser.id,
            reviewId: props.reviewId,
        }

        Axios.post('http://localhost:8080/api/review/addReview', variables,{ headers: authHeader()})
        .then(response=> {
            if(response.data.success) {
                setReview("")
                props.refreshFunction(response.data.result)
            } else {
                alert('Failed to save review')
            }
        })
    }

    return (
        <div>
                <p>Reviews</p>
                {props.reviewList && props.reviewList.map((review, index) => (
                    (!review.responseTo &&
                    <React.Fragment key={review._id}>
                        <FirstReview review={review} movieId={props.movieId} refreshFunction={props.refreshFunctions}/>
                    </React.Fragment>
                )))}
                <form style={{display: 'flex'}} onSubmit>
                    <TextArea
                        style={{width: '100%', borderRadius: '5px'}}
                        placeholder = "leave a review"
                        value={review}
                        onChange={handleChange}
                        />
                        <Button style = {{width: '20%', height: '52px'}} onClick={onSubmit}></Button>
                </form>
        </div>
    );
};

export default Reviews

FirstReview.js

import React from 'react'
import { Button, Comment, Form, Header, TextArea } from 'semantic-ui-react'

const action = [
  <span onClick key="comment-basic-reply-to">reply</span>
]


function FirstReview(props) {

  // const authorName = props.review.author;

  // const author = {
  //   authorName: authorName
  // }

  return (
    <div>
      <Comment>
        <Comment.Content>
          <Comment.Author as='a'> {props.review.author} </Comment.Author>
        </Comment.Content>
      </Comment>
      

        <form style={{display: 'flex'}} onSubmit>
                    <TextArea
                        style={{width: '100%', borderRadius: '5px'}}
                        placeholder = "leave a review"
                        value={Comment}
                        onChange
                        />
                </form>
    </div>
  )
}

export default FirstReview

I have a file called movie-info.component which has a container which uses the Review component.

 <Container2>
            <Reviews refreshFunction={updateReview} reviewList={reviewList} movieId={movieInfo?.id}/>
          </Container2>

Answer 1

This is an assignment question so I can't give you the full answer, but what your error message means is that you're taking an object somewhat this:

let thing = { first_name: "Tom", last_name: "Jack" }

and then doing this:

<p>{thing}</p>

and although you might be expecting to see "Tom Jack" in the above, you will get the error that you've suggested because React is unable to turn the object into anything that would meaningfully fit inside a p tag.

Do this instead:

<p>{thing.first_name + thing.last_name}</p>

which is specific enough for React to validly render.