Below is the code that pulls data from Prismic.io and renders it as a masonry. The issue is with filter() function. When I try to remove some items from cases, it does not render again. What should I do? I tried using useEffect() and useRef()
import React, { useState, useEffect, useRef } from "react";
import '../../components/style/caseStudyContainer.scss'
import arrowImage from "../../components/images/ic_arrow_down_white_small.svg"
import iconPhone from "../images/ic_phone_white.svg";
import iconMail from "../images/ic_mail_white.svg";
import shape3img from "../../components/images/shapes/new/shape09-min.jpeg";
import shape5img from "../../components/images/shapes/new/shape07-min.jpeg";
import shape10img from "../../components/images/shapes/new/shape13-min.jpeg";
import { gsap } from 'gsap';
import { ScrollTrigger } from "gsap/ScrollTrigger";
import {useTranslation} from "react-i18next";
import {Client} from "../../utilities/prismicHelpers";
import Prismic from "@prismicio/client";
function CaseStudyPageContainer() {
gsap.registerPlugin(ScrollTrigger);
const url = window.location.pathname.split('/').pop();
useEffect(() => {
console.log(`You changed the page to: ${url}`)
if (window.location.href.indexOf('news') > 0) {
document.querySelector(".news-link-menu").classList.add("active");
}
}, [url]);
const {t, i18n} = useTranslation();
let isGerman;
let langStr;
if (i18n.language=='en') {
isGerman = false;
langStr = 'en-US';
}
else {
langStr = 'de-De';
isGerman = true;
}
//const [doc, setDocData] = React.useState([]);
const doc = useRef([]);
const [docClone, setDocCloneData] = React.useState([]);
const [docDe, setDocDataDe] = React.useState(null);
let categories;
let solutions = [];
if(isGerman) {
let i, index;
for(i in solutionsDe) {
for(index = 0; index<solutionsDe[i].length;index++) {
solutions.push(solutionsDe[i][index]);
}
}
categories = categoriesDe;
} else {
let i, index;
for(i in solutionsEn) {
for(index = 0; index<solutionsEn[i].length;index++) {
solutions.push(solutionsEn[i][index]);
}
}
categories = categoriesEn;
}
console.log('solutions', solutions);
const handleChange = e => {
}
const [categorySelected, solutionSelected, setSelected] = React.useState("All");
//await Client.getByUID('case_article_post','under-armour-en', {}) fetch by id, todo: delete this after
React.useEffect(() => {
const fetchData = async () => {
const response = await Client.getByUID('case_list', 'cases',
{ lang : langStr },
);
if (response) {
//setDocData(response);
doc.current = response;
setDocCloneData(response);
}
}
fetchData()
}, [])
function filter(event) {
let val = event.target.value;
let i;
let data = [];
for(i in doc.current.data.cases) {
console.log('filter ', val, doc.current.data.cases[i].branch);
if(doc.current.data.cases[i].branch == val) {
doc.current.data.cases.push(doc.current.data.cases[i]);
}
}
doc.current = {data: {cases: []}};
doc.current = doc.current;
}
function getWindowDimensions() {
const { innerWidth: width, innerHeight: height } = window;
return {
width,
height
};
}
const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
console.log('data', doc);
return (
doc.current ?
(
<div>
{windowDimensions.width > 767 ?
(<div className="caseStudyPageContainer">
<div className="sectionTopJobs">
<div className="animationJobsRight">
<img src={shape3img} alt="" style={{width: '100%', height: '100%'}}/>
</div>
<div className="container-fluid"
style={{zIndex: '3', position: 'relative', padding: '0px'}}>
<div className="row pt-filter">
<div className="col-12 offset-lg-1 col-lg-11">
<h1 className="PageTitle">{t('caseStudyPageTitle')}</h1>
</div>
<div className="col-12 offset-lg-1 col-lg-11">
<div className="PageDescription">{t('caseStudyPageDescription')}</div>
</div>
</div>
<div className="row filtersContainerJobs">
<div className="col-12 col-md-12 col-lg-12">
<div className="row">
<div className="col-12 col-md-6 col-lg-4">
<label htmlFor="">{t('Industry')}</label>
<select onChange={filter} style={{backgroundImage: `url(${arrowImage})`}}>
{/*onChange={e => handleChangeLocation(e)} style={{ backgroundImage: `url(${arrowImage})` }}>*/}
{categories.map(category =>
<option key={category} value={category}>{category}</option>
)}
</select>
</div>
<div className="col-12 col-md-6 col-lg-4">
<label htmlFor="">{t('Solutions')}</label>
<select style={{backgroundImage: `url(${arrowImage})`}}>
{/*onChange={e => handleChangeLocation(e)} style={{ backgroundImage: `url(${arrowImage})` }}>*/}
{solutions.map(category =>
<option key={category} value={category}>{category}</option>
)}
</select>
</div>
</div>
</div>
<div style={{height: '800px', padding: '0px', margin: '0px'}}>
<div style={{height: '100%', float: 'left', width: '66.66%'}}>
<div style={{height: '66.66%', width: '100%'}}>
<div style={{float: 'left', width: '50%', height: '100%'}}>
<div className={`card-container`} style={{
width: 'calc(100% - 8px)',
height: 'calc(50% - 6px)',
margin: '4px',
position: 'relative',
backgroundSize: 'cover',
backgroundImage: 'url(' + (typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[0] != 'undefined' ? doc.current.data.cases[0].case_image.url : '') : '') + ')'
}}>
<div className="card-title">
{(typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[0] != 'undefined' ? doc.current.data.cases[0].case_title[0].text : '') : '')}
</div>
<div className={`card-info`}>
<h4>{(typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[0] != 'undefined' ? doc.current.data.cases[0].case_title[0].text : '') : '')}</h4>
<p>{(typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[0] != 'undefined' ? doc.current.data.cases[0].case_description[0].text : '') : '')}</p>
<a href={`${(typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[0] != 'undefined' ? doc.current.data.cases[0].case_link : '') : '')}`}
className="btn--inverted--solid btn--regular">View
case</a>
</div>
</div>
<div className={`card-container`} style={{
width: 'calc(100% - 8px)',
height: 'calc(50% - 6px)',
position: 'relative',
margin: '4px',
backgroundSize: 'cover',
backgroundImage: 'url(' + (typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[1] != 'undefined' ? doc.current.data.cases[1].case_image.url : '') : '') + ')'
}}>
<div className="card-title">
{(typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[1] != 'undefined' ? doc.current.data.cases[1].case_title[0].text : '') : '')}
</div>
<div className={`card-info`}>
<h4>{(typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[1] != 'undefined' ? doc.current.data.cases[1].case_title[0].text : '') : '')}</h4>
<p>{(typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[1] != 'undefined' ? doc.current.data.cases[1].case_description[0].text : '') : '')}</p>
<a href={(typeof doc.current.data != 'undefined' ? doc.current.data.cases[1] : '')}
className="btn--inverted--solid btn--regular">View
case</a>
</div>
</div>
</div>
<div className={`card-container`} style={{
float: 'left',
width: 'calc(50% - 8px)',
height: 'calc(100% - 8px)',
position: 'relative',
margin: '4px',
backgroundPosition: 'center center',
backgroundSize: 'cover',
backgroundImage: 'url(' + (typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[2] != 'undefined' ? doc.current.data.cases[2].case_image.url : '') : '') + ')'
}}>
<div className="card-title">
{(typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[2] != 'undefined' ? doc.current.data.cases[2].case_title[0].text : '') : '')}
</div>
<div className={`card-info`}>
<h4>{(typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[2] != 'undefined' ? doc.current.data.cases[2].case_title[0].text : '') : '')}</h4>
<p>{(typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[2] != 'undefined' ? doc.current.data.cases[2].case_description[0].text : '') : '')}</p>
<a href={(typeof doc.current.data != 'undefined' ? '' : '')}
className="btn--inverted--solid btn--regular">View
case</a>
</div>
</div>
</div>
<div className={`card-container`} style={{
width: 'calc(100% - 4px)',
height: 'calc(33.33% - 4px)',
position: 'relative',
margin: '2px',
backgroundSize: 'cover',
backgroundImage: 'url(' + (typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[3] != 'undefined' ? doc.current.data.cases[3].case_image.url : '') : '') + ')'
}}>
<div className={`card-info`}>
<h4>{(typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[3] != 'undefined' ? doc.current.data.cases[3].case_title[0].text : '') : '')}</h4>
<p>{(typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[3] != 'undefined' ? doc.current.data.cases[3].case_description[0].text : '') : '')}</p>
<a href={(typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[3] != 'undefined' ? doc.current.data.cases[3].case_link : '') : '')}
className="btn--inverted--solid btn--regular">View case</a>
</div>
</div>
</div>
<div style={{width: '33.33%', float: 'left', height: '100%'}}>
<div className={`card-container`} style={{
height: 'calc(33.33% - 4px)',
width: 'calc(100% - 4px)',
position: 'relative',
margin: '2px',
backgroundSize: 'cover',
backgroundImage: 'url(' + (typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[4] != 'undefined' ? doc.current.data.cases[4].case_image.url : '') : '') + ')'
}}>
<div className={`card-info`}>
<h4>{(typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[4] != 'undefined' ? doc.current.data.cases[4].case_title[0].text : '') : '')}</h4>
<p>{(typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[4] != 'undefined' ? doc.current.data.cases[4].case_description[0].text : '') : '')}</p>
<a href={(typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[4] != 'undefined' ? doc.current.data.cases[4].case_link : '') : '')}
className="btn--inverted--solid btn--regular">View case</a>
</div>
</div>
<div className={`card-container`} style={{
height: 'calc(66.66% - 4px)',
width: 'calc(100% - 4px)',
position: 'relative',
margin: '2px',
backgroundSize: 'cover',
backgroundImage: 'url(' + (typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[5] != 'undefined' ? doc.current.data.cases[5].case_image.url : '') : '') + ')'
}}>
<div className={`card-info`}>
<h4>{(typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[5] != 'undefined' ? doc.current.data.cases[5].case_title[0].text : '') : '')}</h4>
<p>{(typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[5] != 'undefined' ? doc.current.data.cases[5].case_description[0].text : '') : '')}</p>
<a href={(typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[5] != 'undefined' ? doc.current.data.cases[5].case_link : '') : '')}
className="btn--inverted--solid btn--regular">View case</a>
</div>
</div>
</div>
</div>
<div style={{
backgroundColor: 'transparent',
height: '600px',
padding: '0px',
margin: '0px'
}}>
<div className={`card-container`} style={{
margin: '4px',
float: 'left',
width: 'calc(33.33% - 8px)',
height: 'calc(100% - 8px)',
position: 'relative',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundImage: 'url(' + (typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[6] != 'undefined' ? doc.current.data.cases[6].case_image.url : '') : '') + ')'
}}>
<div className={`card-info`}>
<h4>{(typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[6] != 'undefined' ? doc.current.data.cases[6].case_title[0].text : '') : '')}</h4>
<p>{(typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[6] != 'undefined' ? doc.current.data.cases[6].case_description[0].text : '') : '')}</p>
<a href={(typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[6] != 'undefined' ? doc.current.data.cases[6].case_link : '') : '')}
className="btn--inverted--solid btn--regular">View case</a>
</div>
</div>
<div style={{float: 'left', width: '66.66%', height: '100%'}}>
<div style={{
margin: '4px',
width: 'calc(100% - 6px)',
height: 'calc(100% - 8px)',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
backgroundImage: 'url(' + (typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[7] != 'undefined' ? doc.current.data.cases[7].case_image.url : '') : '') + ')'
}}>
<div className="card-container"
style={{width: '100%', height: '100%', position: 'relative'}}>
<div className={`card-info`}>
<h4>{(typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[7] != 'undefined' ? doc.current.data.cases[7].case_title[0].text : '') : '')}</h4>
<p>{(typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[7] != 'undefined' ? doc.current.data.cases[7].case_description[0].text : '') : '')}</p>
<a href={(typeof doc.current.data != 'undefined' ? (typeof doc.current.data.cases[7] != 'undefined' ? doc.current.data.cases[7].case_link : '') : '')}
className="btn--inverted--solid btn--regular">View case</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="animationCaseStudyLeft">
<img src={shape5img} alt="" style={{width: '100%', height: '100%'}}/>
</div>
<div className="shapesJobsPageKontakttrigger"></div>
</div>
<div className="shapesJobsPagetrigger"></div>
</div>) :
(<div className="caseStudyPageContainer">
<div className="sectionTopJobs">
<div className="animationJobsRight">
<img src={shape3img} alt="" style={{width: '100%', height: '100%'}}/>
</div>
<div className="container"
style={{zIndex: '3', position: 'relative', padding: '0px !important'}}>
<div className="row">
<div className="col-12 offset-lg-1 col-lg-11">
<h1 className="PageTitle">{t('caseStudyPageTitle')}</h1>
</div>
<div className="col-12 offset-lg-1 col-lg-11">
<div className="PageDescription">{t('caseStudyPageDescription')}</div>
</div>
</div>
<div className="row">
<div className="col-12 col-md-12 col-lg-12">
<div className="row">
<div className="col-12 col-md-4 col-lg-4">
<label htmlFor="">{t('Industry')}</label>
<select style={{backgroundImage: `url(${arrowImage})`}}>
{/*onChange={e => handleChangeLocation(e)} style={{ backgroundImage: `url(${arrowImage})` }}>*/}
{categories.map(category =>
<option key={category} value={category}>{category}</option>
)}
</select>
</div>
<div className="col-12 col-md-4 col-lg-4">
<label htmlFor="">{t('Solutions')}</label>
<select style={{backgroundImage: `url(${arrowImage})`}}>
{/*onChange={e => handleChangeLocation(e)} style={{ backgroundImage: `url(${arrowImage})` }}>*/}
{solutions.map(category =>
<option key={category} value={category}>{category}</option>
)}
</select>
</div>
</div>
</div>
</div>
<div className="row">
<a href={"/" + i18n.language + "/page/xing"}>
<div className="col-12 case-card" style={{
margin: '4px',
height: '243px',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundImage: 'url(' + (doc.length > 0 ? doc[0].data.case_image_desktop.url : '') + ')'
}}>
<h4>{(doc.length > 0 ? doc[0].data.title[0].text : '')}</h4>
</div>
</a>
</div>
</div>
<div className="animationCaseStudyLeft">
<img src={shape5img} alt="" style={{width: '100%', height: '100%'}}/>
</div>
<div className="shapesJobsPageKontakttrigger"></div>
</div>
<div className="shapesJobsPagetrigger"></div>
</div>)
}
</div>
)
: ('Loading')
);
}
export default CaseStudyPageContainer;
Below is the code that pulls data from Prismic.io and renders it as a masonry. The issue is with filter() function. When I try to remove some items from cases, it does not render again. What should I do? I tried using useEffect() and useRef()
I think it does not re-render, because you are not changing the state of
docanywhere. You should have something like:and then in the
filter()function, you should invoke the setter, once you have the new value fordoc: