I am building a project management application using reactjs and graphql.

When I send out query from reactjs it gets a response with the data below

{
   "data":{
    "clients":[
       {
         "name":"Okoye Ifeoma",
         "email":"[email protected]",
         "phone":"0805-854-754-580"
       }
    ]
  }
}

But it does not show the data on the browser instead it display the following error on the console

Error: Array.prototype.map() expects a return value from arrow function

Clients

import { gql, useQuery } from "@apollo/client";
import ClientRow from "./ClientRow";
const GET_CLIENTS = gql`
  query getClients {
    clients {
      id
      name
      email
      phone
    }
  }
`;

export const Clients = () => {
  const { loading, error, data } = useQuery(GET_CLIENTS);

  if (loading) return <p>loading...</p>
  console.log(data.clients);
  if (error) return <p>Something went wrong</p>
  return (
    <>
      {!loading && !error && (
        <table className="table table-hover mt-3">
          <thead>
            <tr>
              <th>Name</th>
              <th>Email</th>
              <th>Phone</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {data.clients.map(client => {
              <ClientRow key={client.id} client={client} />
            })}
          </tbody>
        </table>
      )}
    </>
  );
};

ClientRow

import { FaTrash } from "react-icons/fa";
export default function ClientRow({ client }) {
  return (
    <tr>
      <td>{client.name}</td>
      <td>{client.email}</td>
      <td>{client.phone}</td>
      <td>
        <button className="btn btn-danger">{FaTrash}</button>
      </td>
    </tr>
  );
}

CodePudding user response：

What's gone wrong?

The arrow function in Clients > tbody is not returning anything.

{
  data.clients.map(
    client => { <ClientRow key={client.id} client={client} /> }
  )
}

When you enclose the body of an arrow function in {}s you must expressly return a value.

The Fix

Simply enclose your JSX in parenthesis and return it from the function.

{
  data.clients.map(
    client => { return (
      <ClientRow key={client.id} client={client} /> 
    )}
  )
}

CodePudding user response：

I'm not interested in graphql, but you can check if data is fetched or not.

data && data.clients.map(client => {.....})