We Keep Coding

Handling the Check Box filter in React Js

Im Having a Table which has multiple records and Filter component with the Search Bar. What im trying to do is Based on the value selected by the user from all the filters i have pass those arrays to parent and form an object,
Im having 3 components here,
1)Parent : Data
export default function Data(props) {
const [domain, setDomain] = useState([]);
const [fileType, setFileType] = useState([]);
const [entity, setEntity] = useState(["Patents"]);
const [year, setYear] = useState({});
//This is the search bar state
const [keywords, setKeywords] = useState([]);
//based on the filter values im calling the API to get the records for table based on the value selected by the user from my filer
useEffect(() => {
const fetchResults = async (projectid) => {
const url = props.apiURL.rpaapiurl + "/search";
console.log("fetchData called-->" + url);
const resultsObj = {
projectId: projectid,
filter: {
domain: domain,
fileType: fileType,
entity: entity,
},
};
const response = await fetch(url, {
method: "POST",
body: JSON.stringify(resultsObj),
headers: {
"Content-Type": "application/json",
},
});
const data = await response.json();
console.log("All data-->", data);
setResults(data);
};
fetchResults(5);
}, [domain, fileType, entity]);
const handleFileType = (fileTypeArray) => {
setFileType(fileTypeArray);
};
return (
<Item1>
<Dropdown onChangeFileType={(FileTypeFilteredArray) => handleFileType(FileTypeFilteredArray)} ></Dropdown>
</Item1>
<Item2>
<Table
Data={dataresults}
Attributes={resultTable}
entitytypeHandler={props.entitytypeHandler}
></Table>
</Item2>
)
From the data parent component im passing the hadler which will return updated array from the child and im setting it to state.
2)Child : Dropdown
export default function Dropdown(props) {
return (
<FilterItem>
<Input
type="search"
placeholder="Search in title, description, keywords"
></Input>
<Filter1></Filter1>
<Filetr2></Filetr2>
<ContentFormat
onChangeFileType={props.onChangeFileType}
></ContentFormat>
<Filter4></Filter4>
<Filter5></Filter5>
<TextWrap>
<P text="End year" fontSize="14px" color="#454545"></P>
<KeywordImg src={droparrow} />
</TextWrap>
</FilterItem>
)}
Nothing special here since we can not skip a component passing the same thing to nested child,
Nested Child : ContentFormat
export default function ContentFormat(props) {
const [isDisplay, setIsDisplay] = useState("false");
const array = ["HTML", "PDF"];
const toggle = () => {
setIsDisplay(!isDisplay);
};
let fileTypeArray = [];
const handleSelection = (event) => {
const value = event.target.value;
console.log("value-->", +value);
if (event.target.checked == true) {
fileTypeArray.push(value);
console.log("if fileTypeArray-->", fileTypeArray);
} else if (fileTypeArray.length > 0) {
fileTypeArray = fileTypeArray.filter((element) => {
console.log("element-->", +element);
if (event.target.value !== element) return element;
});
console.log("else fileTypeArray-->", fileTypeArray);
}
console.log("function fileTypeArray-->", fileTypeArray);
};
const applyClickHandler = () => {
console.log("Applied fileTypeArray-->", fileTypeArray);
props.onChangeFileType(fileTypeArray);
};
return (
<div>
<DropContent>
<DropButton onClick={toggle}>
{" "}
<P text="By Content Format" fontSize="14px" color="#454545"></P>
<KeywordImg src={droparrow} />
</DropButton>
<ContextWrapper style={{ display: isDisplay ? "none" : "block" }}>
<P
text="Filter by Extension types"
fontSize="18px"
color="#ACACAC"
textAlign="center"
padding="22px 32px 14px"
></P>
<DropScroll className="sl-style-3">
{array.map((item, index) => {
return (
<ContextItem key={index}>
<DropList
onHandleSelection={handleSelection}
text={item}
value={item}
></DropList>
</ContextItem>
);
})}
</DropScroll>
<ApplyButton onClick={applyClickHandler}>
<P text="Apply" fontSize="16px" color="#fff" textAlign="center"></P>
</ApplyButton>
</ContextWrapper>
</DropContent>
</div>
);
}
4)DropList
export default function DropList(props) {
const changeHandler = (e) => {
console.log(e);
props.onHandleSelection(e);
};
return (
<div>
<div className="">
<TickBox
type="checkbox"
id={props.id}
name={props.name}
value={props.value}
onChange={(e) => {
changeHandler(e);
}}
/>
{props.text}
</div>
</div>
);
}
I'm getting the updated array on click of apply button in the parent but if user un-selects any check box the it deleting the complete array
In data i have to form the object base on the state array passed by all the filters, i tried for the one filter as above but its not working can any one suggest better way to do it,
Because here handling one filter is default and i have to do it for total 5 filters
So any suggestion or one common component for all the filters
Im not sure whether i should be asking these kinda questions or not since I'm very at posting the right questios but pardon me if its wrong question or the way of asking is wrong,
Any help would be appricited.

React function freezing website when dispatched

I passed a function to the child to check a checkbox and then to set setDispatch(true), the problem is that when I check the checkbox everything freezes and the website stops until I close and open again.
the function:
const [selectedChkBx, setSelectedChkBx] = useState({ arrayOfOrders: [] });
const onCheckboxBtnClick = (selected) => {
const index = selectedChkBx.arrayOfOrders.indexOf(selected);
if (index < 0) {
selectedChkBx.arrayOfOrders.push(selected);
} else {
selectedChkBx.arrayOfOrders.splice(index, 1);
}
setSelectedChkBx(selectedChkBx)
toggleDispatchButton()
};
const toggleDispatchButton = () => {
if (selectedChkBx.arrayOfOrders.length == 0) {
setDispatchButtonDisplay(false)
}
else {
setDispatchButtonDisplay(true)
}
}
Child Component:
<form style={{ display: 'block' }} >
<Row sm={1} md={2} lg={3}>
{ordersDisplay.map((value, key) => {
return (
<motion.div key={value.id} layout>
<DeliveryQueueComp
selectedChkBx={selectedChkBx}
toggleDispatchButton={toggleDispatchButton}
setDispatchButtonDisplay={setDispatchButtonDisplay}
value={value}
onCheckboxBtnClick={onCheckboxBtnClick}
/>
</motion.div>
)
})
}
</Row> </form>
DeliveryQueueComp Code:
<div
className={styles1.checkBox}
style={{ background: selectedChkBx.arrayOfOrders.includes(value.id) ?
'#f84e5f' : 'transparent' }}
onClick={() => { onCheckboxBtnClick(value.id) }}
>
<FontAwesomeIcon icon={faCheck} style={{ fontSize: '10px', opacity:
selectedChkBx.arrayOfOrders.includes(value.id) ? '1' : '0' }} />
</div>
If I remove toggleDispatchButtonDisplay, it works but then after a while the page freezes again.
Any thoughts about this?

As you didn't provide setDispatch code I don't know what it does, but for the rest I think I know why it's not working.
You're assigning the array and then set it to the state. If you want to do this that way you should only do a forceUpdate instead of a setState (as it has already been mutated by push and splice).
To properly update your state array you can do it like this
const onCheckboxBtnClick = (selected) => {
const index = selectedChkBx.arrayOfOrders.indexOf(selected);
if (index < 0) {
//the spread in array creates a new array thus not editing the state
setSelectedChkBx({
arrayOfOrders: [...selectedChkBx.arrayOfOrders, selected]
});
} else {
// same thing for the filter here
setSelectedChkBx({
arrayOfOrders: selectedChkBx.arrayOfOrders.filter(
(value) => value !== selected
)
});
}
toggleDispatchButton();
};
Here is the sandbox of your code https://codesandbox.io/s/eager-kalam-ntc7n7

.push() is improperly pushing twice on Next.js

The .push() in insertToCart() function in Cart component is pushing twice, no idea why. Since all the logs run once, I think it should just work, the appendToCart() works perfectly. I'm returning the previous value on the functions on purpose, to not trigger a re-render of the whole app. Any help would be much appreciated.
Edit : saveItem() is being called twice.
export default function Cart({ children }) {
const [cart, setCart] = useState([]);
useEffect(() => {
setCart(JSON.parse(localStorage.getItem('frentesRosarinos')) || []);
}, []);
function insertToCart(product, amount) {
console.log('insert');
setCart((pc) => {
pc.push({ ...product, amount });
localStorage.setItem('frentesRosarinos', JSON.stringify(pc));
return pc;
});
}
function appendToCart(id, amount) {
console.log('append');
setCart((pc) => {
const savedItem = pc.find((c) => c.id === id);
savedItem.amount = amount;
localStorage.setItem('frentesRosarinos', JSON.stringify(pc));
return pc;
});
}
return (
<CartContext.Provider
value={{ cart, insertToCart, appendToCart }}
>
{children}
</CartContext.Provider>
);
}
export default function Product({ product, isCart }) {
const { cart, appendToCart, insertToCart } =
useContext(CartContext);
const [addItemClosed, setAddItemClosed] = useState(true);
const [amount, setAmount] = useState(
product.amount || cart.find(({ id }) => id === product.id)?.amount || 0,
);
const amountToAdd = useRef(0);
function saveItem(value) {
setAmount((pa) => {
const newAmount = parseInt(value) + pa;
pa === 0 ? insertToCart(product, newAmount) : appendToCart(product.id, newAmount);
return newAmount;
});
amountToAdd.current.value = 0;
}
return (
<div className={styles.container}>
<div className={styles.addItemsContainer}>
<p
onClick={() => setAddItemClosed((ps) => !ps)}
className={`${styles.addItemsButton} ${addItemClosed ? styles.addBorders : ''}`}
>
Agregar más items
</p>
<div
className={`${styles.quantity} ${
addItemClosed ? styles.addBorders : styles.firstChildHide
}`}
>
<span>Ingrese una cantidad</span>
<input ref={amountToAdd} type='number' />
</div>
<p
className={`${styles.addOne} ${
addItemClosed ? styles.addBorders : styles.secondChildHide
}`}
onClick={() => saveItem(amountToAdd.current.value)}
>
Agregar
</p>
</div>
<div style={{ margin: '10px 0' }}>
<PressButton action={() => saveItem(1)} size='medium' lightMode>
{isCart ? 'Agregar otro' : 'Añadir al carrito'}
</PressButton>
</div>
</div>
);
}

I'm returning the previous value on the functions on purpose, to not
trigger a re-render of the whole app. Any help would be much
appreciated
You should not do this, official react docs say you should update state in immutable way, and you should follow this advice.
Also here:
pc.push({ ...product, amount });
again you are doing mutation which is not OK.
PS. Also in general you should be careful when calling functions inside functional set state in case they perform side effects, because in strict mode the setter function will be invoked twice. Calling a set state within another set state (as you call setCart inside setAmount) could be considered a side effect.

You shouldn't be calling inside a state setter a function that will call this same setter. Change saveItem to this:
function saveItem(value) {
amount === 0 ? insertToCart(product, newAmount) : appendToCart(product.id, newAmount);
setAmount((pa) => {
const newAmount = parseInt(value) + pa;
return newAmount;
});
amountToAdd.current.value = 0;
}
Change insertToCart, so you don't mutate the array (this line pc.push({ ...product, amount }); is a state mutation). Use destructing instead, like so:
function insertToCart(product, amount) {
console.log('insert');
setCart((pc) => {
const newCart = [...pc, { ...product, amount }]
localStorage.setItem('frentesRosarinos', JSON.stringify(newCart));
return newCart;
});
}

Why isn't my component rerendered when I change the state in componentDidMount?

Why isn't my Chart component re-rendered when I change the state with setState in componentDidMount?
I want to fetch the data from the database and when they are loaded, render the chart. Instead, the chart is rendered with empty data and the data from the database isn't shown.
changeJoystick = () => {
this.setState({robustActive: !this.state.robustActive, compactActive: !this.state.compactActive});
};
async fetchHeatMapData() {
let robustData = [];
let compactData = [];
try {
let response = await getDoubleAxisSegmentAverage();
robustData = response.data;
let {seriesRobust} = this.state;
robustData = robustData.slice(1, 37);
for (let i = 0; i < 6; i++) {
seriesRobust[i].data = robustData.slice(6 * i, 6 * (i + 1));
}
return seriesRobust;
} catch (err) {
console.log(err);
}
}
componentDidMount() {
this.fetchHeatMapData()
.then(seriesRobust => {
this.setState({seriesRobust});
console.log(this.state.seriesRobust);
}
)
}
render() {
let robust_variant = this.state.robustActive ? 'contained' : 'outlined';
let compact_variant = this.state.compactActive ? 'contained' : 'outlined';
return (
<Fragment>
<Grid container direction='row' justify='flex-start'>
<Grid item>
<Button variant={robust_variant} color='secondary' onClick={this.changeJoystick.bind(this)}>Robust
Joystick</Button>
</Grid>
<Grid item>
<Button variant={compact_variant} color='secondary'
onClick={this.changeJoystick.bind(this)}>Compact
Joystick</Button>
</Grid>
</Grid>
<br/>
<Grid container justify='space-evenly'>
<Grid item>
<Chart
options={this.state.options}
series={this.state.robustActive ? this.state.seriesRobust :
this.state.seriesCompact}
type='heatmap'
width={1000}
height={1000}/>
</Grid>
</Grid>
</Fragment>

componentDidMount() {
this.fetchHeatMapData()
.then(seriesRobust => {
this.setState({seriesRobust});
console.log(this.state.seriesRobust);
}
)
}
You should not expect updated state value just after setState call!! Mayority of 'setState not rerendered' questions is about this.
You can do just
componentDidMount() {
this.fetchHeatMapData()
}
and setState() inside fetchHeatMapData() instead of return
let {seriesRobust} = this.state;
this code uses the same ref for object, it's enough to
const seriesRobust = [...this.state.seriesRobust]
this.state.seriesRobust is almost NOT USED in render, it's used conditionally (only if robustActive is true)
series={this.state.robustActive ? this.state.seriesRobust :

I changed my code like this:
componentDidMount() {
this.fetchHeatMapData().then(() => this.forceUpdate());
}
In the fetchHeatMapData() function I set the state with
this.setState({seriesRobust});
When the data has been fetched I'm doing a forceUpdate in componentDidMount() and now it's working as I intended.
I know that you should usually avoid using forceUpdate() but this is the only solution I can think of right now.

Triggering useState

I have a component and render it conditionally with different props.
{activeNavItem === 'Concept Art' ? (
<Gallary
images={conceptArtImages}
sectionRef={sectionRef}
/>
) : (
<Gallary
images={mattePaintingImages}
sectionRef={sectionRef}
/>
)}
This component has useState(false) and useEffect hooks. useEffect determines when screen position reaches the dom element and it triggers useState to true: elementPosition < screenPosition. Then my state triggers class on dom element: state ? 'animationClass' : ''.
const Gallary = ({ images, sectionRef }) => {
const [isViewed, setIsViewed] = useState(false);
useEffect(() => {
const section = sectionRef.current;
const onScroll = () => {
const screenPosition = window.innerHeight / 2;
const sectionPosition = section.getBoundingClientRect().top;
console.log(screenPosition);
if (sectionPosition < screenPosition) setIsViewed(true);
};
onScroll();
window.addEventListener('scroll', onScroll);
return () => {
window.removeEventListener('scroll', onScroll);
};
}, [sectionRef]);
return (
<ul className="section-gallary__list">
{images.map((art, index) => (
<li
key={index}
className={`section-gallary__item ${isViewed ? 'animation--view' : ''}`}>
<img className="section-gallary__img" src={art} alt="concept art" />
</li>
))}
</ul>
);
};
Problem: it works on my first render. But when I toggle component with different props, my state iniatially is true and I haven't animation.
I notice that if I have two components(ComponentA, ComponentB) instead of one(ComponentA) it works fine.

try setting isViewed to false when your component is not in view like this:
if (sectionPosition < screenPosition && !isViewed){
setIsViewed(true);
}
else{
if(isViewed)
setIsViewed(false);
}
and you can do it like this:
if (sectionPosition < screenPosition && !isViewed){
setIsViewed(state=>!state);
}
else{
if(isViewed)
setIsViewed(state=>!state);
}
plus no need to render same component multiple times, you can change props only:
<Gallary
images={activeNavItem === 'ConceptArt'?conceptArtImages:mattePaintingImages}
sectionRef={sectionRef}
/>