I am able to use the search function through backend and its working in postman, also able to bring the search result on the frontend browser console. But i am not able to display the searched result in the page.

Frontend code is attached below. searchHandler is bringing the searched result to console but i am not able to display that on page

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

const UserList = () => {
  const [userData, setUserData] = useState("");

  const fetchUserData = async () => {
    const resp = await axios.get("/getTodo");
    console.log(resp);

    //if no user is there please dont set any value
    if (resp.data.users.length > 0) {
      setUserData(resp.data.users);
    }
  };

  useEffect(() => {
    fetchUserData();
  }, [userData]);

  ///edit
  const handleEdit = async (user) => {
    var edittodo = `${user.todo}`;
    var edittask = `${user.task}`;
    const userTodo = prompt("Enter your Name", edittodo);
    const userTask = prompt("Enter your Email", edittask);

    if (!userTodo || !userTask) {
      alert("please Enter Todo and Task Both");
    } else {
      const resp = await axios.put(`/editTodo/${user._id}`, {
        todo: userTodo,
        task: userTask,
      });
      console.log(resp);
    }
  };

  //Delete

  const handleDelete = async (userId) => {
    const resp = await axios.delete(`/deleteTodo/${userId}`);
    console.log(resp);
  };

  const searchHandle = async (event) => {
    let key = event.target.value;
    console.log(key)
    await axios
      .get(`http://localhost:5500/search/${key}`)
      .then((response) => {
        console.log(response.data);
       
       
      })
      .catch((err) => {
        console.log(err);
      });
  };

 

  return (
    <div>
      <form>
        <input
          type="text"
          className="search-box"
          placeholder="Search Todo"
          onChange={(searchHandle)}
        />
      </form>

      <section className="text-gray-600 body-font">
        <div className="container px-5 py-24 mx-auto">
          <div className="flex flex-col text-center w-full mb-8">
            <h1 className="sm:text-4xl text-3xl font-medium title-font mb-2 text-gray-900">
              All Users
            </h1>
          </div>
          <div className="lg:w-2/3 w-full mx-auto overflow-auto">
            <table className="table-auto w-full text-left whitespace-no-wrap">
              <thead>
                <tr>
                  <th className="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100 rounded-tl rounded-bl">
                    Todo
                  </th>
                  <th className="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">
                    Task
                  </th>
                  <th className="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">
                    Edit
                  </th>
                  <th className="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">
                    Delete
                  </th>
                </tr>
              </thead>
              <tbody>
                {userData &&
                  userData.map((user, index) => (
                    <tr key={index}>
                      <td className="px-4 py-3">{user.todo}</td>
                      <td className="px-4 py-3">{user.task}</td>
                      <td className="px-4 py-3">
                        <button
                          className="hover:text-green-500"
                          onClick={() => handleEdit(user)}
                        >
                          Edit
                        </button>
                      </td>
                      <td className="px-4 py-3 text-lg text-gray-900">
                        <button
                          className="hover:text-red-500"
                          onClick={() => handleDelete(user._id)}
                        >
                          Delete
                        </button>
                      </td>
                    </tr>
                  ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>
    </div>
  );
};

export default UserList;

CodePudding user response：

Just set the data inside the then

.get(`http://localhost:5500/search/${key}`)
  .then((response) => {
     setUserData(resp.data);
   
   
  })

CodePudding user response：

Change to this

const fetchUserData = async () => {
    const resp = await axios.get("/getTodo");
    resp.then(data => setUserData(data.users));
  };

  useEffect(() => {
    fetchUserData();
  }, []);