0

введите сюда описание изображения

введите сюда описание изображения

import { useState } from "react";
import AddCardList from "../../components/TrelloList/AddCardList/AddCardList";
import TrelloList from "../TrelloList/TrelloList";
import TrelloData from "../../trellodata";
import ContextAPI from "../../ContextAPI";
import { v4 as uuidv4 } from "uuid";
import styles from "./App.module.css";

function App() {
  const [data, setData] = useState(TrelloData);

  const updateListTitle = (updatedTitle, listId) => {
    const list = data.lists[listId];
    list.title = updatedTitle;
    setData({
      ...data,
      lists: {
        ...data.lists,
        [listId]: list,
      },
    });
  };

  const addCard = (title, listId) => {
    const newCardId = uuidv4();

    const newCard = {
      id: newCardId,
      title,
    };

    const list = data.lists[listId];
    list.cards = [...list.cards, newCard];
    setData({
      ...data,
      lists: {
        ...data.lists,
        [listId]: list,
      },
    });
  };

  const addList = (title) => {
    const newListId = uuidv4();
    setData({
      listIds: [...data.listIds, newListId],
      list: {
        ...data.lists,
        [newListId]: {
          id: newListId,
          title,
          cards: [],
        },
      },
    });
  };

  return (
    <ContextAPI.Provider value={{ updateListTitle, addCard, addList }}>
      <div className={styles.root}>
        <div className={styles.container}>
          {data.listIds.map((listID) => {
            const list = data.lists[listID];
            return <TrelloList list={list} key={listID} />;
          })}
          <div>
            <AddCardList type="list" />
          </div>
        </div>
      </div>
    </ContextAPI.Provider>
  );
}

export default App;



const TrelloData = {
  lists: {
    "01list": {
      id: "01list",
      title: "To do",
      cards: [
        {
          id: "01card",
          title: "Doing homework",
        },
        {
          id: "02card",
          title: "Walking",
        },
        {
          id: "03card",
          title: "Cleaning",
        },
      ],
    },
    "02list": {
      id: "02list",
      title: "In progress",
      cards: [],
    },
  },
  listIds: ["01list", "02list"],
};

export default TrelloData;
1
  • 1
    ну написано же, нет такого свойства. значит в data.lists может ничего не быть...проверяй 16 июн 2022 в 19:00

1 ответ 1

1

У Вас опечатка в функции addList - вместо свойства lists устанавливается свойство list.

1
  • Спасибо, огромное) 16 июн 2022 в 19:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.