how can i render array of objects with react - node.js

Question

i have looked up every relating posts for 8hours but still cant solve it
{comments.map((c) => {
console.log(c)
return(
<div className="col-lg-12" key={c._id}>
<div className="testi-item">
<div className="testi-comment">
<p>
<i className="fa fa-quote-left" />
{c.message}
<i className="fa fa-quote-right" />
</p>
<ul className="stars list-unstyled">
<li>
<i className="fa fa-star" />
</li>
<li>
<i className="fa fa-star" />
</li>
<li>
<i className="fa fa-star" />
</li>
<li>
<i className="fa fa-star-half-alt" />
</li>
<li>
<i className="fa fa-star" />
</li>
</ul>
</div>
<div className="client-info">
<h5>{c.companyName}</h5>
<p>{c.ip}</p>
</div>
</div>
</div>
states
const [comments, setComments] = useState([]);
const getComments = async function () {
try {
const response = await axios.get("/comment");
console.log(response);
setComments(response.data.comments);
} catch (error) {
console.error(error);
}
};
smaple object
{ companyName: "asd" ip: "112.214.38.68" message: "asd" _id: "6162fb4c06b4541fa2420f5c" }
enter image description here
Uncaught Error: Objects are not valid as a React child (found: object with keys {_id, companyName, message, ip}). If you meant to render a collection of children, use an array instead.
please help
complete code
import React, { useState } from "react";
import OwlCarousel from "react-owl-carousel";
import "owl.carousel/dist/assets/owl.carousel.css";
import "owl.carousel/dist/assets/owl.theme.default.css";
import ScreenHeading from "../../utilities/ScreenHeading/ScreenHeading";
import ScrollService from "../../utilities/ScrollService";
import Animations from "../../utilities/Animations";
import "./Testimonial.css";
import shape from "../../../src/img/Testimonial/shape-bg.png";
import Comment from "../CommentComponent/Comment";
import axios from "axios";
import lady from "../../../src/img/Testimonial/lady.png";
import mike from "../../../src/img/Testimonial/mike.png";
import man from "../../../src/img/Testimonial/man.png";
export default function Testimonial(props) {
const [comments, setComments] = useState([]);
const getComments = async function () {
try {
const response = await axios.get("/comment");
console.log(response);
setComments(response.data.comments);
} catch (error) {
console.error(error);
}
};
let fadeInScreenHandler = (screen) => {
if (screen.fadeInScreen !== props.id) return;
Animations.animations.fadeInScreen(props.id);
getComments();
};
const fadeInSubscription =
ScrollService.currentScreenFadeIn.subscribe(fadeInScreenHandler);
const options = {
loop: true,
margin: 0,
nav: true,
animateIn: "bounceInRight",
animateOut: "bounceOutRight",
dots: true,
autoplay: true,
smartSpeed: 1000,
responsive: {
0: {
items: 1,
},
768: {
items: 1,
},
1000: {
items: 3,
},
},
};
return (
<div>
<ScreenHeading title={"Valuable Comments"} subHeading={"방명록 리스트"} />
<section className="testimonial-section fade-in" id={props.id || ""}>
<div className="container">
<div className="row">
<OwlCarousel
className="owl-carousel"
id="testimonial-carousel"
{...options}
>
{comments}
{!comments ? (
<div>non</div>
) : (
<div>
{comments.map((c) => {
console.log(c)
return (
<div className="col-lg-12" key={c._id}>
<div className="testi-item">
<div className="testi-comment">
<p>
<i className="fa fa-quote-left" />
{c.message}
<i className="fa fa-quote-right" />
</p>
<ul className="stars list-unstyled">
<li>
<i className="fa fa-star" />
</li>
<li>
<i className="fa fa-star" />
</li>
<li>
<i className="fa fa-star" />
</li>
<li>
<i className="fa fa-star-half-alt" />
</li>
<li>
<i className="fa fa-star" />
</li>
</ul>
</div>
<div className="client-info">
<h5>{c.companyName}</h5>
<p>{c.ip}</p>
</div>
</div>
</div>
);
})}
</div>
)}
</OwlCarousel>
</div>
</div>
</section>
<div className="footer-image">
<img src={shape} alt="not responding" />
</div>
</div>
);
}

Answer 1

You’ve embedded a bare {comments} in your render function right before the ternary; comments is an object and can’t be dropped into the DOM raw, just like the error message is telling you.
Remove that line and it should be fine.

Answer 2

The issue is here:
{comments}
You should remove this line.
If you woule like to see the comments you should do:
{JSON.stringify(comments)}