How to remove HTML div on click using Javascript

Question

So I have this Display() function which takes events from the Google Calendar and the function returns a list of elements (each element is associated with a slider) to be rendered on the screen (see return statement of Display() function) and renders them as seen here. So each element comes with a Remove button so that I can remove an unwanted element from the page using the hideMe() function inside the Display() function. The hideMe() function does seem to do its work, however, it removes all the elements on the page as seen here. So I am struggling to figure out what I should fix so that when I click on the Remove button, it only removes the element and the slider associated to that remove button. I am new to React and JavaScript so please help. Any help is appreciated and thank you in advance.

function Display() {
    const isMounted = useRef(true);
    const [items, saveItems] = useState([]);
    const [visible, setVisible] = useState(true);
    const [fading, setFading] = useState(false);

    useEffect(() => {
        return () => {
            isMounted.current = false;
        };
    }, []);

    useEffect(() => {
        (async () => {
            const items = await fetchItems();
            //Do not update state if component is unmounted
            if (isMounted.current) {
                saveItems(items);
            }
        })();
    }, []);

    function hideMe() {
        setFading(true);
        setTimeout(() => setVisible(false), 650);
    }

    return (
        <Tab.Pane attached={false}>
            <h5>Rate stress level for each event</h5>
            <br/>
            {items.map(item => (
                    <div key={item.id} isvisible={!fading}
                         style={visible ? null : { display: "none" }}>
                        <Typography id="discrete-slider-restrict" gutterBottom>
                           {item}
                           <button onClick={hideMe}>Remove</button>
                        </Typography>
                        <PrettoSlider aria-label="pretto slider" defaultValue={98} step={null}marks={stresslevel}/>
                    </div>
            ))}
        </Tab.Pane>
    )
}

Answer 1

It seems to me that this issue is happening because all elements are available in same state or i would say that they all share same state. So, this executes for all. If it is possible for you to extract it to a new component and use the hideMe function there. This will i am sure work for each individual elements.

It is my suggestion please go through below. May be you have to tweak a little bit.

You can extract the elements in a separate component like:

const Item = props => {

     const [visible, setVisible] = useState(true);
     const [fading, setFading]   = useState(false);

     function hideMe() {
         setFading(true);
         setTimeout(() => setVisible(false), 650);
     }

     return (
         <div isvisible={!fading} style={visible ? null : { display: "none" }}>
            <Typography id="discrete-slider-restrict" gutterBottom>
                  {item}
               <button onClick={hideMe}>Remove</button>
            </Typography>
            <PrettoSlider aria-label="pretto slider" defaultValue={98} 
                          step={null} marks={stresslevel}/>
         </div>
     );

};
export default Item;

Then you can use it like:

  // import Item
{items.map(item => (
    <Item key={item.id} itemObj={item} /> 
    // in case if you need item obj then props.itemObj will get you the object.
))}

---

In this way you can manage the hideMe function with the separate specific Item component.