Select a specific element from a list in ReactJS - reactjs

Question

I have a react js application where I render a list of items. When a user click on an item and after that clicks outside in console.log(id, "checked id"); I should see only that item where user clicked before.
import "./styles.css";
import React, { useEffect, useState } from "react";
const Element = ({ id, setId }) => {
const handleClick = (e) => {
const condition = e.target.className.includes("test");
if (!condition) {
setId(id);
}
};
console.log(id, "checked id");
useEffect(() => {
document.addEventListener("click", handleClick);
return () => document.removeEventListener("click", handleClick);
}, []);
return (
<div
className={"test"}
onClick={() => {
setId(id);
}}
>
hello {id}
</div>
);
};
export default function App() {
const [idSelect, setIdSelect] = useState(0);
return (
<div className="App">
{[0, 1, 2].map((el) => {
return <Element setId={setIdSelect} key={el} id={el} />;
})}
</div>
);
}
Basically I should trigger only that element where user previously clicked. EX: user clicks on hello 0 item and after that clicks outside, in console they should see only console.log(0, "checked id");, meaning that only that component is triggered. Issue: at the moment when user click outside, all the components renders, but I need only where user clicked.
demo: https://codesandbox.io/s/compassionate-einstein-9v1ws?file=/src/App.js:0-821 Question: How to solve my issue?

Answer 1

First you need to move the console.log to the useEffect to control when it will be executed, since you wanted to execute when the document is clicked them do it the clickHandle.
useEffect(() => {
const handleClick = (e) => {
const condition = e.target.className.includes("test");
if (!condition && isSelected) {
console.log(id, "checked id");
setId(id); // You don't need this, it's already set to current id.
}
};
document.addEventListener("click", handleClick);
return () => document.removeEventListener("click", handleClick);
}, [setId, id, isSelected]);
To make sure only the selected Element logs to console i added the attribute isSelected to handle that.
isSelected={idSelect === el}
This should solve the problem, but just to be safe i added stopPropagation to the div click to make sure it doesn't trigger the document click.
onClick={(e) => {
e.stopPropagation();
setId(id);
}}
You can check this sandbox i modified here.
It seems like we have many attributes right, i believe a good solution for that is move the display event to the parent tag, like this.
export default function App() {
const [idSelect, setIdSelect] = useState(0);
useEffect(() => {
const handleClick = (e) => {
console.log(idSelect, "checked id");
}
document.addEventListener("click", handleClick);
return () => document.removeEventListener("click", handleClick);
});
return (
<div className="App">
{[0, 1, 2].map((el) => {
return (
<Element
setId={setIdSelect}
key={el}
id={el}
/>
);
})}
</div>
);
}
You can also replace setId and id attributes with a single click event handler like () => setId(id).
If you want the function to be executed as well when the selected id changes, you can use useEffect like this.
useEffect(() => {
console.log(idSelect, "checked id");
}, [idSelect]);
I suggest moving the console.log(idSelect, "checked id"); to a function and call it at both events.