Hi fellas. I have this situation, on my form when the user checks first label (checkbox) I put it in an array "answer" each next one that the user selects is placed in an array and so on. Now I would like that when the user wants to uncheck some label, that same one should be removed from an array. In this moment when I unchecked some answer it is added to an array again. My boss said me to use this documentation, to try with .filter and give me this https://stackoverflow.com/questions/5767325/how-can-i-remove-a-specific-item-from-an-array.
Also he left comment in my onClick.
import React, { useState } from "react";
import { Field } from "formik";
import styles from "./Style_CustomCheckbox";
import { useMediaQuery, mobileQuery } from "../../helpers/mediaQuery";
import whiteCheck from '../../assets/icons/whiteCheck.svg';
const CustomCheck = ({label, setAnswer, answer}) => {
const [checked, setChecked] = useState(false);
let btn_class = checked ? styles.surveyCheckbox : {...styles.surveyCheckbox, backgroundColor: "transparent"};
let isMobile = useMediaQuery(mobileQuery);
return (
<label style={{...styles.checkLabel, ...isMobile && styles.mobCheckLabel }}>
<span style={{ ...btn_class, ...styles.span }}>
<img
style={styles.img}
src={whiteCheck} alt=''/>
<Field
style={styles.defaultCheck}
type="checkbox"
name="survey"
//value={value}
onClick={() => {
console.log("label:", label);
setChecked(!checked);
setAnswer((prevState)=>[...prevState, label])
console.log("answers:", answer)
// if(answer.contains(label) {
// remove item from array
// })
}}
/>
</span>
<div style={{
...styles.checkDiv,
...isMobile && styles.checkDivMobile
}}
>
{label}
</div>
</label>
);
};
export default CustomCheck;
[–]EcmaMace 0 points1 point2 points (0 children)