I was trying to retrieve data from database and display it in the browser on button click but I always receive this error (Uncaught Error: Objects are not valid as a React child (found: object with keys {studentId, firstName, surName, otherName, state, localGovt, phoneNumber, imgUrl}). If you meant to render a collection of children, use an array instead.). I was able to see the data when I use console.log, but failed in the DOM.

Here is the code on the frontend.

import Axios from "axios";
import { useState, useEffect } from "react";

const SearchUsers = () => {
  const [input, setInput] = useState("");
  const [studentResult, setStudentResult] = useState([]);

  const handleSearch = async () => {
    //const sanitizedInput = input.trim().toUpperCase();

    try {
      const { data } = await Axios.get("http://localhost:3500/students");
      const { result } = data; // this is an array
      console.log(result)//this works. it displays array of objects with the data from the db
        setStudentResult(result);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <>
      <div className="flex flex-col w-2/4 mx-auto my-20">
        <div>
          <input
            className="input w-full"
            type="text"
            name="search"
            placeholder="Search a Student"
            onChange={(e) => setInput(e.target.value)}
          />
        </div>
        <div className="flex justify-center mt-5">
          <button
            type="button"
            className="btn shadow shadow-gray-500"
            onClick={handleSearch}
          >
            Get All Students
          </button>
        </div>

        <div>
          {studentResult.map((item, index) => {
            return (
              <div key={index}>
                <p>{item.firstName}</p>
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
};
export default SearchUsers;

Here is code on the backend. It's a controller function that retrieves all data from the database

const getAllStudents = (req, res) => {
  const selectAll = "SELECT * FROM students";

  studentDB.query(selectAll, (err, result) => {
    res.sendStatus(200).json({ result: result });
  });
};

CodePudding user response：

What's going wrong?

The problem arises when you:

1. Initialize useState with an empty array, and
2. Didn't define its type;

Then, the type of array will implicitly be assigned to never[], meaning that array should always be empty.

Therefore, mutating that array, including via setStudentResult(newArray), will always fail.

How to fix it

To solve this, we need to explicitly define the type of the empty array. For example:

const [studentResult, setStudentResult] = useState<{name: string, grade:number}[]>([]);

You should change the type declaration above based on the data structure of result.

Hope it helps. Cheers.