ReactJs adding active class to DIV

Question

I have 3 DIVs, dynamically created. My target is: when any div is clicked to add active class to it, and of course if any other has that active class to remove it. How can I achieve that?

import React, { useState } from "react";
import "./styles/App.css";
import { Container, Box, Typography, makeStyles } from "@material-ui/core";

const useStyles = makeStyles({
  mainBox: {
    display: "flex",
    justifyContent: "space-evenly"
  },
  mybox: {
    backgroundColor: "#9fa8da",
    padding: "40px",
    color: "#fff",
    maxWidth: 300
  }
});

function App() {
  const clasess = useStyles();

  const [active, setactive] = useState("");

  const mydata = [
    {
      id: 1,
      name: "Ganesh",
      des: "UI Developer"
    },
    {
      id: 2,
      name: "Suresh",
      des: "Accountant"
    },
    {
      id: 3,
      name: "Srikanth",
      des: "Digital"
    }
  ];

  const onClick = index => {
    setactive("active");
  };

  return (
    <Container>
      <Box className={clasess.mainBox}>
        {mydata.map((val, index) => {
          return (
            <>
              <Box
                boxShadow={1}
                key={index}
                onClick={e => {
                  onClick(index);
                }}
                className={active}
              >
                <Typography variant="h4">{val.name}</Typography>
                <Typography>{val.des}</Typography>
              </Box>
            </>
          );
        })}
      </Box>
    </Container>
  );
}

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

I have 3 DIVs, dynamically created. My target is: when any div is clicked to add active class to it, and of course if any other has that active class to remove it. How can I achieve that?

I have 3 DIVs, dynamically created. My target is: when any div is clicked to add active class to it, and of course if any other has that active class to remove it. How can I achieve that?

Answer 1

You already managed on your Box component to add an "active" classname when one of them is Clicked.

But, you need to add some style or something to show for those "active" elements.

Inside of useStyle add the class active and test it out with some styling:

i.e)

const useStyles = makeStyles({
  mainBox: {
    display: "flex",
    justifyContent: "space-evenly"
  },
  mybox: {
    backgroundColor: "#9fa8da",
    padding: "40px",
    color: "#fff",
    maxWidth: 300
  },
  active {
    backgroundColor: "red"
  }
});

I'm not sure if you need to add "active" class using classes, something like :

             <Box
                boxShadow={1}
                key={index}
                onClick={e => {
                  onClick(index);
                }}
                className={classes.active}
              >
                <Typography variant="h4">{val.name}</Typography>
                <Typography>{val.des}</Typography>
              </Box>

Answer 2

Try to check when active id is the clicked id:

import React, { useState } from "react";
import "./styles/App.css";
import { Container, Box, Typography, makeStyles } from "@material-ui/core";

const useStyles = makeStyles({
  mainBox: {
    display: "flex",
    justifyContent: "space-evenly"
  },
  mybox: {
    backgroundColor: "#9fa8da",
    padding: "40px",
    color: "#fff",
    maxWidth: 300
  }
});

function App() {
  const clasess = useStyles();

  const [active, setActive] = useState();

  const mydata = [
    {
      id: 1,
      name: "Ganesh",
      des: "UI Developer"
    },
    {
      id: 2,
      name: "Suresh",
      des: "Accountant"
    },
    {
      id: 3,
      name: "Srikanth",
      des: "Digital"
    }
  ];

  const onClick = id => {
    setActive(id);
  };

  return (
    <Container>
      <Box className={clasess.mainBox}>
        {mydata.map((val, index) => {
          return (
            <>
              <Box
                boxShadow={1}
                key={index}
                onClick={e => {
                  onClick(val.id);
                }}
                className={val.id == id ? active : deactive}
              >
                <Typography variant="h4">{val.name}</Typography>
                <Typography>{val.des}</Typography>
              </Box>
            </>
          );
        })}
      </Box>
    </Container>
  );
}

export default App;