React and material ui fade effect same for both elements

Question

i have a list where for each list siblings onclick fade a different element with different text, the problem is that one time fade start for siblings in list fade effects gone and it not enabled again. This is the code:

import { Fade, Grid, List, ListItemButton, ListItemIcon, ListItemText, Typography } from "@mui/material";
import { useEffect, useState, Fragment, forwardRef } from "react";
import { Outlet, Link } from "react-router-dom";
import {Box} from "@mui/material"
import InBoxIcon from "@mui/icons-material/Inbox";
import DraftsRounded from "@mui/icons-material/Drafts";

const MainContent = () => {

    const divs = {
        0: {
            text: "hello",
            pr: "this is pr"
        },
        1: {
            text:"second",
            pr:"this is second pr"
        }
    }

    const [selectedItemList, setselectedItemList] = useState();
    const [selectedDivList, setselectedDivList] = useState();
    const [selectedElemList, setselectedElemList] = useState(false);

    const handleSelectedList = ( e, index) => {
        if(selectedItemList === index){ setselectedItemList() }else{setselectedItemList(index)}
        setselectedDivList(divs[index]);
        setselectedElemList((e) => !e);
    }

    const Compc = forwardRef((props, ref) => {
    return(
        <Box ref={ref} {...props}>
             <Typography variant="h4" sx={{ textAlign: 'center' }}> {props.text} </Typography>
             <Typography variant="h6" sx={{ textAlign: 'center' }}> {props.pr} </Typography>
        </Box>
    )
})

  return (
    <>
        <Grid container direction="row" pt={10} pl={1} pr={1} pb={1}>
            <Grid item xs={12}>
                <Typography variant="h2" sx={{textAlign:'center'}}> TITLE </Typography>
            </Grid>
            <Grid item xs={6}>
                <List aria-label="main list element">
                    
                    <ListItemButton selected={selectedItemList === 0} onClick={ (e) => handleSelectedList(e, 0)}>
                        <ListItemIcon>
                            <InBoxIcon />
                        </ListItemIcon>
                        <ListItemText primary="Inbox"/>
                    </ListItemButton>
                    
                    <ListItemButton selected={selectedItemList === 1}  onClick={ (e) => handleSelectedList(e, 1)}>
                        <ListItemIcon>
                            <DraftsRounded />
                        </ListItemIcon>
                        <ListItemText primary="Drafts"/>
                    </ListItemButton>
                </List>
            </Grid>
            <Grid item xs={6}>
                    { 
                        selectedDivList ?
                        <Fade in={selectedElemList} timeout={600}> 
                            <Compc  {...selectedDivList} />
                        </Fade>
                        : ''
                    }
            </Grid>
        </Grid>
    </>
  )
};

export default MainContent;

how can i reset selectedElemList used for fade to make it false when clicking on siblings in list and repeat fade effect.

Answer 1

Try these two changes.

This change displays the selected div on every click.

const handleSelectedList = ( e, index) => {
    if(selectedItemList === index){ setselectedItemList() }else{setselectedItemList(index)}
    setselectedDivList(divs[index]);
    if(selectedItemList === index){ setselectedElemList((prev) => !prev); }else{setselectedElemList(true);}
}

The change below answers your question about the fade effect. It is in the answer to this question How to trigger a CSS animation on EVERY TIME a react component re-renders.

<Fade key={Math.random()} in={selectedElemList} timeout={600}>
    <Compc  {...selectedDivList} />
</Fade>

React re-renders the component when the key attribute changes. By providing a random key on each render, the Fade executes on each click.