[Bug] Erro no item | React: escrevendo com Typescript | Alura

2
respostas

Referente ao curso React: escrevendo com Typescript, no capítulo Selecionando um item e atividade Selecionando uma tarefa

por Rodrigo Nobre

| 75.9k xp | 4 posts

Analista de P&D

Seguindo a aula estou com esse erro no item, e não consegui identificar a causa Insira aqui a descrição dessa imagem para ajudar na acessibilidade

import { useState } from 'react';
import FormTasks from '../Components/Forms/formtasks';
import List from '../Components/List/list';
import StopWatch from '../Components/StopWatch/stopWatch';
import AppStyle from './App.module.scss';
import { ITasks } from '../Models/Tasks/tasks';

function App() {
  const [tasks, setTasks] = useState<ITasks[] | []>([]);
  const [selected, SetSelected ] = useState<ITasks>();

  function selectTask(taskSelected: ITasks){
    SetSelected(taskSelected);
  }
  return (
    <div className="App">
      <header className={AppStyle.AppStyle}>
        <FormTasks
        setTasks={setTasks}
        ></FormTasks>
        <List
        tasks = {tasks}
        selectTask={selectTask}
        ></List>
        <StopWatch></StopWatch>
      </header>
    </div>
  );
}

export default App;

import { ITasks } from '../../Models/Tasks/tasks';
import ListStyle from '../List/list.module.scss';
import Item from './Item/item';

interface Props  {
    tasks: ITasks[],
    selectTask: (taskSelected: ITasks) => void

}
function List({tasks, selectTask}: Props) {


    return (
        <aside className= {ListStyle.List}>
            <h3>Tasks</h3>
            <ul>
                {tasks.map(item => (
                    <Item
                    selectTask={selectTask}
                    key={item.id}
                    {...item} 
                    
                    >
                    </Item>
                ))}
            </ul>
        </aside>
    )

}

export default List;

import { ITasks } from '../../../Models/Tasks/tasks'
import  ListStyle from '../list.module.scss'

interface Props extends ITasks {
    selectTask: (taskSelected: ITasks) => void 
}

export default function Item (
    { 
        task,
        time,
        selected,
        completed,
        id,
        selectTask
    }: Props) {
    return (
        <li className={ListStyle.item} onClick={() => selectTask({task,time,selected,completed,id})}>
        <h3>{task}</h3>
        <span>{time}</span>
    </li>
    )
}

2 respostas

por Felipe dos Reis Monteiro

| 54k xp | 7 posts

Front end Júnior

29/11/2023

Em React, quando você utiliza o spread operator (...) em conjunto com as props de um componente, como em {...tals}, você está usando a propriedade de propagação (spread) para passar todas as propriedades de um objeto para outro. Isso é frequentemente utilizado para repassar as props de um componente para um elemento filho.

const MeuComponente = (props) => {
  // Faz alguma coisa com as props
  return (
    <OutroComponente {...props} />
  );
};

verifica se essas props q vc está passando para o item vc vai receber as mesmas no seu componente item.

por Rodrigo Nobre

| 75.9k xp | 4 posts

Analista de P&D

03/12/2023

problema aconteceu poque eu declarei o item dessa forma

    return (
        <aside className= {ListStyle.List}>
            <h3>Tasks</h3>
            <ul>
                {tasks.map(item => (
                    <Item
                    selectTask={selectTask}
                    {...item} 
                    key={item.id} 
                    >
                   </Item>
                ))}
            </ul>
        </aside>
    )

simplesmente removi o e funcionou

    return (
        <aside className= {ListStyle.List}>
            <h3>Tasks</h3>
            <ul>
                {tasks.map(item => (
                    <Item
                    selectTask={selectTask}
                    {...item} 
                    key={item.id} 
                    />
                   
                ))}
            </ul>
        </aside>
    )

só não sei explicar o motivo de ter gerado esse erro.