Apply css for selected item based on index-CodePudding

Hi i am looping the data and trying to apply css onclick event, As it is applying to every item how to apply only for selected element based on index, Below is my code

const [isBarOpen, setIsBarOpen] = useState(false);
  const classes = getStyles.new_ticketSearch({ isBarOpen })();
//map is here
    <Box
                          className={classes.bookingTicketContainer}
                          onClick={(e) => {
                            handleOnSelectTicket(i);
                            setIsBarOpen(!isBarOpen);
                          }}
                        >
                          <Box className={classes.bookingBar}>
                            <Box className={classes.bookingSubBox}>
                              <Box className={classes.barInfoboxN1}>
                                <Typography className={classes.durationDetails}>{ticket.ticketsOverview[1]}</Typography>
                              </Box>
                              <Box className={classes.barInfoBoxN2}>
                                <Typography className={classes.changesDetails}>N/A</Typography>
                              </Box>
                              <Box className={classes.barInfoboxN3}>
                                <Typography className={classes.transportModeDetails}>
                                  {ticket.ticketsOverview[8]}
                                </Typography>
                              </Box>
    
                              <Box className={classes.barInfoboxN4}>
                                <Typography className={classes.priceDetails}>
                                  {ticket.ticketsOverview[3]} {ticket.ticketsOverview[4]} {ticket.ticketsOverview[5]}
                                </Typography>
                              </Box>
    
                              {/* <ButtonStyled className={classes.buttonDetails} variant="outlined" value="DETAILS" /> */}
                            </Box>
                          </Box>
                         
                        </Box>

and in css:

bookingBar: {
        display: "flex",
        width: 751,
        height: 76,
        background: !isBarOpen ? theme.palette.common.white : theme.palette.primary[500],
        color: isBarOpen && theme.palette.common.white,
        boxShadow: "0px 2px 2px 1px rgba(0, 0, 0, 0.12), 0px 2px 6px 2px rgba(0, 0, 0, 0.08)",
        borderRadius: 5,
      },

CodePudding user response：

You need to give one state to each items that you will map through.

function Item (){
const [state,setState] = useState(false);

return (<Something onClick={()=>setState(!state)} className={state ? classes.trueClass : classes.falseClass} />)

Then, map your arrays.

CodePudding user response：

You can solve this problem in quite a few ways. One way is to make a separate component with isBarOpen state and with classes by this every children in map will have isolated isBarOpen state and style will also apply only to respective element. Currently every child is having shared isBarOpen state that's why you are facing problem. For example:-

function Foo({ticket}){
  const [isBarOpen, setIsBarOpen] = useState(false);
  const classes = getStyles.new_ticketSearch({ isBarOpen })();
  return(
    <Box
                          className={classes.bookingTicketContainer}
                          onClick={(e) => {
                            handleOnSelectTicket(i);
                            setIsBarOpen(!isBarOpen);
                          }}
                        >
                          <Box className={classes.bookingBar}>
                            <Box className={classes.bookingSubBox}>
                              <Box className={classes.barInfoboxN1}>
                                <Typography className={classes.durationDetails}>{ticket.ticketsOverview[1]}</Typography>
                              </Box>
                              <Box className={classes.barInfoBoxN2}>
                                <Typography className={classes.changesDetails}>N/A</Typography>
                              </Box>
                              <Box className={classes.barInfoboxN3}>
                                <Typography className={classes.transportModeDetails}>
                                  {ticket.ticketsOverview[8]}
                                </Typography>
                              </Box>
    
                              <Box className={classes.barInfoboxN4}>
                                <Typography className={classes.priceDetails}>
                                  {ticket.ticketsOverview[3]} {ticket.ticketsOverview[4]} {ticket.ticketsOverview[5]}
                                </Typography>
                              </Box>
    
                              {/* <ButtonStyled className={classes.buttonDetails} variant="outlined" value="DETAILS" /> */}
                            </Box>
                          </Box>
                         
                        </Box>
  )
}

Inplace where you are mapping through array write this:-

//map here
<Foo ticket={ticket} />