setting states in mapped elements react - reactjs

Question

I'm having a problem setting the states of other mapped elements to false when clicking on one of the individual mapped element. For example,
const [edit, setEdit] = useState(false)
const array = ['witch-king', 'sauron', 'azog']
const arrayrow = array && array.map(el=>{
return <div>
<i
className='fal fa-edit'
onClick={(e)=>{
setEdit(true);
e.stopPropagation()
}
></i>
{edit?<i className='fal fa-times'></i>:''}
<span>{el}</span>
</div>
})
useEffect(()=>{
document.addEventListener('click', ()=>{setEdit(false)})
},[])
The issue is that when you click on one of the icons it will set the state to true, but then if you click on another element's icon, the previously clicked element's state will remain true. I want to be able to set the previously clicked element's state to false when the user clicks on another element's icon.
EDIT: here is a video further explaining what I mean
https://gyazo.com/d8123c9f9a5fcfc48b2149c7faf48bad

Answer 1

Maybe try this, but I am not sure if this wont cause current icon to close down.
const [edit, setEdit] = useState(false)
const array = ['witch-king', 'sauron', 'azog']
const arrayrow = array && array.map(el=>{
return <div>
<i
className='fal fa-edit'
onClick={(e)=>{
setEdit(true);
e.stopPropagation()
}
></i>
<span>{el}</span>
</div>
})
useEffect(()=>{
if(edit){
setEdit(false)
}
},[edit])
Or try something like
const [edit, setEdit] = useState(false)
const array = ['witch-king', 'sauron', 'azog']
const arrayrow = array && array.map(el=>{
const checkEl = (e, currentEl) => {
if(el === currentEl){
e.stopPropagation()
setEdit(true)
}else{
setEdit(false)
}
}
return <div>
<i
className='fal fa-edit'
onClick={(e) => checkEl(e, el)}
></i>
<span>{el}</span>
</div>
})
useEffect(()=>{
document.addEventListener('click', ()=>{setEdit(false)})
},[])
Something like that.

Answer 2

FULL CODE SOLUTION
const MainComponent = () => {
const [currentEdit, setCurrentEdit] = useState('')
const array = ['witch-king', 'sauron', 'azog']
const arrayrow = array && array.map(el=>(
<ChildComponent
key={el}
el={el}
currentEdit={currentEdit}
handleClick={setCurrentEdit}>
)
)
return (<> {arrayrow} Some JSX </>)
}
const ChildComponent = ({ el, handleClick, currentEdit }) => {
return (
<div>
<i
className={`fal ${(currentEdit === el) ? 'fa-times' : 'fa-edit' }`}
onClick={(e) => {
handleClick(el)
}
></i>
<span>{el}</span>
</div>
)
}
EXPLANATION
Instead of using a boolean, I used the value of each item to represent the currently edited item, and initially, it is set to an empty string like this
const [currentEdit, setCurrentEdit] = useState('')
I made a child component passing each the currentEdit and the setCurrentEdit as props.
<ChildComponent
key={el}
el={el}
currentEdit={currentEdit}
handleClick={setCurrentEdit}>
)
Then do a check inside the child component and reset the currentEdit to that element on click
<i
className={`fal ${(currentEdit === el) ? 'fa-times' : 'fa-edit' }`}
onClick={(e) => {
handleClick(el)
}
></i>
PS: Remove the useEffect with the event listener, adding event listeners like that is an anti-pattern in React, and also you don't need it with this solution.