React.js - toggleList
Sat Feb 12 2022 19:17:12 GMT+0000 (Coordinated Universal Time)
Saved by @devdave #javascript #react.js
import { useState, useEffect, useRef } from 'react'; import '../Styles/Hero.css'; function Hero() { // USE REF SETTINGS const activeItem = useRef([]); const toggleTarget = useRef(false); const targetObject = useRef({ id: "", active: false, }); const boxCustomRef = useRef(null); // BOXES AMOUNT const boxesAmout = 160; const updatedItemArray = [] // Create new Array based on boxesAmount const itemArr = new Array(boxesAmout).fill(0); // FOR LOOP => iterate over each item // => push item w/ index as id in updatedItemArray for (let i = 0; i < itemArr.length; i++) { updatedItemArray.push({ id: itemArr[i] = i }) }; const toggleBoxHandler = (event) => { // id of clicked element let targetId = parseInt(event.target.id); // new Arr based on previous elements let prevArr = [...activeItem.current]; // current Object to push in array targetObject.current = { id: targetId, active: toggleTarget.current, }; // if Arr is empty => push first element if ((activeItem.current.length === 0) && (targetObject.current.active === false)) { targetObject.current = { id: targetId, active: true } activeItem.current = [...prevArr, targetObject.current]; console.log("first item"); console.log(activeItem.current); // add active class event.target.className = "hero__grid__box--overlay--default hero__grid__box--overlay--isActive" } // // IF ARR IS NOT EMPTY => logic goes here // // FIRST => check if target id is already included in previous Arr // -> if not: push new targetObject / toggle active state // -> if yes: remove item from Arr / edit new targetObject & toggle active state / push updated item back in Arr // else if (activeItem.current.length > 0) { console.log("arr includes at least one item"); // loop over prevArr for (let i = 0; i < prevArr.length; i++) { // if prevArr doesn't include targetId if (prevArr[i].id !== targetId) { console.log("it's not a match!"); // // activeState default is false // => set State to true // => hydrate current Arr with current targetObject // => toggle active class // targetObject.current = { id: targetId, active: true } activeItem.current = [...prevArr, targetObject.current]; // add active class event.target.className = "hero__grid__box--overlay--default hero__grid__box--overlay--isActive"; } // if prevArr includes targetId // Remove & replace item from prevArr => update its active State / push updated item back in Arr if (prevArr[i].id === targetId) { console.log("arr already include this item"); // console.log(prevArr[i].id); let updatedArr; let updatedItem = { id: "", active: "", }; // FILTER & CREATE new Array w/ item to update const filteredItem = prevArr.filter((item) => item.id === targetId); // FILTER & CREATE new Array without item to update const filteredArr = prevArr.filter(item => item.id !== targetId); console.log(filteredArr); // Updates filtered item updatedItem = { id: filteredItem[0].id, active: !filteredItem[0].active } // UPDATE prevArr w/ correct active value prevArr = [...filteredArr, updatedItem]; // IF state is true => add class active if (updatedItem.active === true) { event.target.className = "hero__grid__box--overlay--default hero__grid__box--overlay--isActive" } // IF state is false => remove class active if (updatedItem.active === false) { event.target.className = "hero__grid__box--overlay--default hero__grid__box--overlay--notActive" } // HYDRATE current array w/ updated previous values activeItem.current = [...prevArr]; return; } } } } return ( <div className="section__container hero__container"> <div className='hero__grid__container'> <div className='hero__grid__container__background'></div> { updatedItemArray.map((item) => { return ( <div key={item.id} id={item.id} ref={boxCustomRef} className='hero__grid__box'> <div id={item.id} className='hero__grid__box--overlay--default hero__grid__box--overlay--notActive' onClick={toggleBoxHandler}></div> </div> ) }) } </div> </div> ); } export default Hero;
Comments