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":"ify@mail.com",
"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>
);
}
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.
Simply enclose your JSX in parenthesis and return it from the function.
{
data.clients.map(
client => { return (
<ClientRow key={client.id} client={client} />
)}
)
}
I'm not interested in graphql, but you can check if data is fetched or not.
data && data.clients.map(client => {.....})