I am trying to render data from mongodb server to react app. And it's not working-CodePudding

This is the console log error

Uncaught Error: Objects are not valid as a React child (found: object with keys {_id, inputText, __v}). If you meant to render a collection of children, use an array instead.
at throwOnInvalidObjectType (react-dom.development.js:14887:1)
at reconcileChildFibers (react-dom.development.js:15828:1)
at reconcileChildren (react-dom.development.js:19167:1)
at updateHostComponent (react-dom.development.js:19924:1)
at beginWork (react-dom.development.js:21618:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)

I am being able to save my input to the server but am getting error while trying to fetch it. Here's the component which is supposed to return the list.

import React, { useState, useEffect } from "react";
import ToDoItem from "./ToDoItem";
import InputArea from "./InputArea";
import "bootstrap/dist/css/bootstrap.min.css";
import axios from "axios";

const ToDoList = () => {
const [x, setX] = useState([]);
const xList = () => {
return x.map((y,index) => {
  return <ToDoItem key={index} text={y} />;
});
};
useEffect(() => {
axios
  .get("http://localhost:5000/")
  .then((res) => {
    setX(res.data);
  })
  .catch((err) => console.log(err));
  }, []);

 return (
 <div className="container">
  <div className="heading">
    <h1>To-Do List</h1>
  </div>
  <InputArea />
  <div>{xList()}</div>
 </div>
 );
 };

 export default ToDoList;

CodePudding user response：

That specific error usually occurs when you are trying to print out an entire object instead of lets say the properties from each object.

Can you console.log the list and let us know what properties you have for each object?