Confirmation button, triggers all confirmation boxes to open - reactjs

Question

I am in the process of finishing my todo application, since redux is a bit new to me of course I encounter problems. My problem is when I click the delete button (recycle icon) I want a confirmation box to pop up with basic Yes and No buttons, I have built that, but... when I click one recycle button all of the other confirmation boxes get set to True and they pop up in sync. I need only one box to pop up for the right todo.id.
Note: I have built this before without redux, but I am still wrapping my head around redux.
Here is my code:
JS:
import React, {useState, Fragment} from 'react'
import { useDispatch, useSelector } from 'react-redux';
import "./todo.css"
const Todos = () => {
const dispatch = useDispatch();
const todos = useSelector(state => state.todos);
const confirmationSt = useSelector(state => state.confirmation)
const handleConfirm = id => {
dispatch({
type: "CONFIRM",
})
}
const handleContinue = () => {
dispatch({
type: "CONTINUE",
})
}
const handleClick = id => dispatch({
type: "DELETE_TODO",
payload: id,
})
if (!todos || !todos.length) {
return <p>Empty</p>
}
return (
<ul className='unlist'>{todos.map(todo =><Fragment key={todo.id}> <div className='todoContent'><li >{todo.label}</li>
<div><button className='delete' onClick={handleConfirm}><i className="fas fa-recycle"></i></button>
<button className='delete' onClick={handleConfirm}><i className="fas fa-wrench"></i></button>
</div>
</div>
{confirmationSt === true ? <div className='confirmation-box'>
Are you sure?
<button onClick={() => handleClick(todo.id)}>Yes</button>
<button onClick={handleContinue}>No</button>
</div> : null}
</Fragment>
)}
</ul>
)
}
Reducer:
const initalState = {
todos: [],
confirmation: false,
}
const reducer = (state = initalState, action) => {
switch (action.type) {
case "ADD_TODO":
return {
...state,
todos: [...state.todos, action.payload],
}
case "DELETE_TODO":
return {
...state,
todos: state.todos.filter(todo => todo.id !== action.payload)
}
case "CONFIRM":
return {
...state,
confirmation: !state.confirmation,
}
case "CONTINUE":
return {
...state,
confirmation: false
}
default: return state;
}
}
export default reducer

Answer 1

I have changed confirmation from boolean to id of the task
import React, { useState, Fragment } from 'react'
import { useDispatch, useSelector } from 'react-redux';
import "./todo.css"
const Todos = () => {
const dispatch = useDispatch();
const todos = useSelector(state => state.todos);
const confirmationSt = useSelector(state => state.confirmation)
const handleConfirm = id => {
dispatch({
type: "CONFIRM",
payload: id
})
}
const handleContinue = () => {
dispatch({
type: "CONTINUE",
})
}
const handleClick = id => dispatch({
type: "DELETE_TODO",
payload: id,
})
if (!todos || !todos.length) {
return <p>Empty</p>
}
return (
<ul className='unlist'>
{ todos.map(todo =>
<Fragment key={todo.id}>
<div className='todoContent'>
<li >{todo.label}</li>
<div>
<button className='delete' onClick={()=>handleConfirm(todo.id)}>
<i className="fas fa-recycle"></i>
</button>
<button className='delete' onClick={()=>handleConfirm(todo.id)}>
<i className="fas fa-wrench"></i>
</button>
</div>
</div>
{
confirmationSt === todo.id ?
<div className='confirmation-box'>
Are you sure?
<button onClick={() => handleClick(todo.id)}>Yes</button>
<button onClick={handleContinue}>No</button>
</div>
: null
}
</Fragment>
)}
</ul>
)
}
const initalState = {
todos: [],
confirmation: -1,
}
const reducer = (state = initalState, action) => {
switch (action.type) {
case "ADD_TODO":
return {
...state,
todos: [...state.todos, action.payload],
}
case "DELETE_TODO":
return {
...state,
todos: state.todos.filter(todo => todo.id !== action.payload)
}
case "CONFIRM":
return {
...state,
confirmation: action.payload,
}
case "CONTINUE":
return {
...state,
confirmation: false
}
default: return state;
}
}
export default reducer