Estoy tratando de cambiar el estado dentro de una matriz de mapas. mi estado se comparte en todos los elementos creados por la matriz de mapas y estoy tratando de cambiar el estado del elemento en el que se hizo clic, aquí está el código:
{dbData ? dbData.map((item, i) => ( <Box id={item.id} className={`${cl.FolderStyles} ${activeFolderStyles}`} key={i} onClick={activeFolder}> <FolderIcon className={cl.folder_icon} /> {item.name} </Box> )) : <img src={loader} alt="loader" /> }aquí puede ver que estoy creando varios elementos, y el estado es: "activeFolderStyles", lo que quiero es agregar una clase al elemento en el que se hizo clic que se activa, pero mi problema es que el estado de todos los elementos cambia después de hacer clic y todo volverse activo.
const [activeFolderStyles, setActiveFolderStyles] = useState(); const activeFolder = (e) => { const id = e.target.id; const element = document.getElementById(id); console.log(element); if (element.classList.contains(side_cl.folderActive)) { setActiveFolderStyles(""); } else { setActiveFolderStyles(side_cl.folderActive); } }aquí está el estado que estoy usando.
const [activeFolderStyles, setActiveFolderStyles] = useState(); const activeFolder = (e) => { const id = e.target.id; const element = document.getElementById(id); if (element.classList.contains(side_cl.folderActive)) { setActiveFolderStyles(""); } else { setActiveFolderStyles(side_cl.folderActive); }}
Así que realmente no sé cómo señalar el estado objetivo y no todos
Puede mantener algún estado que defina cuál es la carpeta actualmente activa. El estado identificará la carpeta actualmente activa usando su id , que se puede obtener cuando dbData . Durante el mapeo, puede verificar si el item.id actual del item actual es igual a la id activa en su estado, y si lo es, agregue su clase, de lo contrario, no agregue la clase en absoluto (nota, activeFolder en el a continuación, JSX se refiere al nuevo valor de estado que estamos creando para realizar un seguimiento de la identificación de la carpeta activa, no a la función del controlador de eventos de clic de su pregunta):
{dbData ? dbData.map((item, i) => ( <Box id={item.id} className={`${cl.FolderStyles} ${item.id === activeFolder ? side_cl.folderActive : ""}`} key={item.id} onClick={() => handleFolderClick(item.id)}> <FolderIcon className={cl.folder_icon} /> {item.name} </Box> )) : <img src={loader} alt="loader" /> } Luego puede crear su estado activeFolder :
const [activeFolder, setActiveFolder] = useState();Luego puede actualizar este estado cuando hace clic en su carpeta a la carpeta actual:
// Use this instead of your `activeFolder` function const handleFolderClick = (newItemId) => { // If the folder we're activating is already "active", deactivate it, otherwise, update the state to point to activate our new folder setActiveFolder(currItemId => currItemId === newItemId ? "" : newItemId); } El JSX anterior usa la función handleFolderClick anterior al pasar la identificación del elemento del cuadro en el que se hizo clic.
Nota al margen: los métodos DOM como getElementById() , querySelectorAll() etc. rara vez se usan en React, si se encuentra usándolos, es muy probable que no esté haciendo algo de la forma en que se pretendía, donde un El estado del componente debe usarse para ayudar a impulsar la lógica del componente y lo que representa.
Puedes hacer esto de una manera mucho más limpia así
<Box id={item.id} className={item.id === activeFolderStyles ? "ACTIVE CLASSNAME" : "NOT ACTIVE CLASSNAME"} key=. {i} onClick={setActiveFolderStyles(item.id)}> <FolderIcon className={cl.folder_icon} /> {item.name} </Box>