-2
Hello! I have a line of code like this:
if (searchQuery.length != 0) {
return (
<Row hidden>
{searchQuery.map((res) => (
In this snippet of code, I’m trying to add a if shortly after the => ( with the keys "{ if...".
What I wish to do is: add one if so that only if "res.display" is true (in Strapi, as a boolean), to continue the code. That way, it doesn’t work (and several - 12 hours trying - other):
{ if ({res.display /*como true*/}) {
//todo o trecho de código executável
}
It returns me a syntax error, hoping that the "res.display" has a comma instead of a dot; perhaps wishing it was a parameter (because of the keys).
The whole project is that I have cards inside the site and I would like to hide the ones that are with false in the boolean "display" that I created at Strapi. Without the need to exclude them, to restore them when necessary; I saw, also, that in version 3.2 of Strapi, there is function of Publish/unpublish, but I am using 3.1.4, so, trying to update the packages, I totally broke the system.
Editing:
I tried to do as my friend @Jason Rabelo taught and had problems again. I’ll leave the entire code section so it can be understood better:
/* components/ServiceList/index.js */
import { useQuery } from "@apollo/react-hooks";
import { gql } from "apollo-boost";
import React, { useState } from 'react';
import Link from "next/link";
import LayerMoreInfo from "../../components/LayerMoreInformation";
import {
Card,
CardBody,
CardImg,
CardText,
CardTitle,
CardHeader,
CardFooter,
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink,
Container,
Row,
Col,
Jumbotron,
Button,
Carousel,
CarouselItem,
CarouselControl,
CarouselIndicators,
CarouselCaption,
Spinner
} from "reactstrap";
const QUERY = gql`
{
services {
id
name
description
image {
url
}
header
display
}
}
`;
function ServiceList(props) {
const [collapse, setCollapse] = useState(false);
const [status, setStatus] = useState('Closed');
const onEntering = () => setStatus('Opening...');
const onEntered = () => setStatus('Opened');
const onExiting = () => setStatus('Closing...');
const onExited = () => setStatus('Closed');
const toggle = () => setCollapse(!collapse);
const { loading, error, data } = useQuery(QUERY);
if (error) return "Error loading services";
//If services are returned from the GraphQL query, run the filter query
//and set equal to variable serviceSearch
if (loading) return ( <Spinner style={{ width: '5rem', height: '5rem', textAlign: "center", alignContent: "center" }} color="primary" /> );
if (data.services && data.services.length) {
//searchQuery
const searchQuery = data.services.filter((query) =>
query.name.toLowerCase().includes(props.search)
);
if (searchQuery.length != 0) {
return (
<Row>
{searchQuery.filter((res) => /* isso sendo um teste, baseado na solução do Jason: {if (res.display) { return ( */
<Col sm="4" key={res.id}>
<Card style={{ margin: "20px 0px 20px 0px", textAlign: "center" }} className="layerCard">
<CardHeader tag="h4">{res.header}</CardHeader>
<CardBody style={{ height: "150px" }}>
<CardTitle tag="h5">{res.name}</CardTitle>
<CardText>{res.description}</CardText>
</CardBody>
<CardImg
top={true}
style={{ height: "180px", textAlign: "center" }}
src={`${res.image[0].url}`}
className="img-responsive"
/>
<LayerMoreInfo id={res.id} />
</Card>
</Col>
))}
<style jsx global>
{`
a {
color: white;
}
a:link {
text-decoration: none;
color: white;
}
a:hover {
color: white;
}
.card-columns {
column-count: 3;
}
`}
</style>
</Row>
//aqui a o fechamento do condicional if: );}}
);
} else {
return <h1>No Services Found</h1>;
}
}
}
export default ServiceList;
Unfortunately, he answered me with several errors in keys and parentheses outside of this "{if (res.display..."; including in else
of if (searchQuery.length != 0)
Issue 2:
I was able to solve the problem, based on a little observability and the answer from @Jason Rabelo. The solution lies between the answers, with my answer.
you tried to remove from the ? if(res.display key)
– Giovanni Dias
Yeah, buddy. It didn’t work.
– Ray