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

CodePudding user response：

The issue is here:

{comments}

You should remove this line.

If you woule like to see the comments you should do:

{JSON.stringify(comments)}

CodePudding user response：

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.