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