Estou fazendo esse curso pela segunda vez, mas agora codando por minha própria conta, até agora estava tudo dando certo, até que tive o problema do meu selected
nunca ficar true
.
Já tentei deixar a id pelo uuid assim como tbm já tentei deixar uma fixa, mas mesmo assim não passa pela verificação do ternário.
Me ajudem por favor, pois já não sei o que fazer.
Código do APP.tsx :
import React, { useState } from 'react';
import Form from '../components/form';
import List from '../components/task-list';
import Cron from '../components/cronometer';
import style from './App.module.scss';
import { ITask } from '../types/ITask';
export default function App() {
const [tasks, setTasks] = useState<ITask[]>([]);
const [selected, setSelected] = useState<ITask>();
function select(taskSelected: ITask) {
setSelected(taskSelected);
setTasks(oldTasks => oldTasks.map(task => ({
...task,
selected: task.id === taskSelected.id ? true : false
})))
console.log(taskSelected);
}
return (
<main className={style.app}>
<div className={style.tasks}>
<Form setTasks={setTasks}/>
<Cron />
</div>
<List tasks={tasks} select={select}/>
</main>
);
}
Código da lista:
import Item from '../task-list/item';
import style from './list.module.scss';
import { ITask } from '../../types/ITask'
import { v4 as uuidv4 } from 'uuid';
interface Props {
tasks: ITask[],
select: (taskSelected: ITask) => (void)
}
function List ({ tasks, select } : Props) {
return(
<section className={style.section}>
<h2 className={style.titulo}>Estudos do dia</h2>
<ul className={style.lista}>
{tasks.map((item, index) => (
<Item
task={item.task}
time={item.time}
id={uuidv4()}
completed={false}
selected={false}
key={item.id}
select={select}
/>
))}
</ul>
</section>
)
}
export default List;
Código do item
import style from '../../task-list/list.module.scss';
import { ITask } from '../../../types/ITask';
interface Props extends ITask{
select: (taskSelected: ITask) => void
}
export default function Item({
task,
time,
completed,
selected,
id,
select
}: Props) {
return (
<li className={`${style.item} ${selected ? style.itemSelecionado : ''}`}
onClick={() => select({
task,
time,
completed,
selected,
id
})}>
<h3 className={style.nomeItem}>{task}</h3>
<span className={style.tempoItem}>{time}</span>
</li>
)
}