ReactJs将活动类添加到DIV

我有3个div，动态创建。我的目标是：当单击任何div向其添加活动类时，当然，如果任何其他div具有该活动类，则将其删除。我怎样才能做到这一点

import React，{useState}来自“React”；
导入“/styles/App.css”；
从“@material ui/core”导入{Container、Box、排版、makeStyles}；
const useStyles=makeStyles({
主机箱：{
显示：“flex”，
为内容辩护：“空间均匀”
},
mybox：{
背景色：“9fa8da”，
填充：“40px”，
颜色：“fff”，
最大宽度：300
}
});
函数App（）{
const clases=useStyles（）；
const[active，setactive]=useState（“”）；
常量mydata=[
{
id:1，
姓名：“甘尼什”，
des：“UI开发人员”
},
{
id:2，
名称：“苏雷什”，
des：“会计”
},
{
id:3，
名称：“斯里坎”，
des：“数字”
}
];
const onClick=index=>{
设置活动（“活动”）；
};
返回(
{mydata.map（（val，index）=>{
返回(
{
onClick（索引）；
}}
className={active}
>
{val.name}
{val.des}
);
})}
);
}
导出默认应用程序
尝试检查活动id是否为单击的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;

import React，{useState}来自“React”；
导入“/styles/App.css”；
从“@material ui/core”导入{Container、Box、排版、makeStyles}；
const useStyles=makeStyles({
主机箱：{
显示：“flex”，
为内容辩护：“空间均匀”
},
mybox：{
背景色：“9fa8da”，
填充：“40px”，
颜色：“fff”，
最大宽度：300
}
});
函数App（）{
const clases=useStyles（）；
const[active，setActive]=useState（）；
常量mydata=[
{
id:1，
姓名：“甘尼什”，
des：“UI开发人员”
},
{
id:2，
名称：“苏雷什”，
des：“会计”
},
{
id:3，
名称：“斯里坎”，
des：“数字”
}
];
const onClick=id=>{
setActive（id）；
};
返回(
{mydata.map（（val，index）=>{
返回(
{
onClick（val.id）；
}}
className={val.id==id？活动：非活动}
>
{val.name}
{val.des}
);
})}
);
}
导出默认应用程序；
您已经在Box组件上管理了在单击其中一个组件时添加“活动”类名

但是，您需要为这些“活动”元素添加一些样式或内容

在
useStyle
的内部添加类
active
，并使用一些样式进行测试：

i、 （e）

const useStyles=makeStyles({
主机箱：{
显示：“flex”，
为内容辩护：“空间均匀”
},
mybox：{
背景色：“9fa8da”，
填充：“40px”，
颜色：“fff”，
最大宽度：300
},
活跃的{
背景颜色：“红色”
}
});

我不确定是否需要使用
类
添加“活动”类，例如：

{
onClick（索引）；
}}
className={classes.active}
>
{val.name}
{val.des}
需要将活动类添加到div