Todolist (1)

이진아·2021년 7월 1일
0

toy Project

목록 보기
1/4

주제 : TodoList

기능 :
1. 원하는 item onClick하면 title, content 내용이 나옴
2. 수정 기능
3. 삭제 기능
4. 추가 기능

<1. 원하는 item onClick하면 title, content 내용이 나옴 >

const [todos, setTodos] = useState([
        {id:1, title: '베어를 환영합니다.', content: '베어는 메모와 산문을 작성할 수 있는 아름답고, 편리한 앱입니다. 베어는 시작하기도, 마스터하기도 쉽습니다. 간단히 소개해드리겠습니다. 또한 [월간 뉴스레터 구독](http://eepurl.com/dvs38P)을 통하여 각종 팁과 인터뷰, 뉴스 및 [기타 정보](https://bear.app/faq/)를 받아보실 수 있습니다'},
        {id:2, title: '정리 및 게시.', content: '베어의 몇 가지 간단한 기능에 대해 배워보겠습니다. 처음부터 시작하고 싶으면 [[베어에 환영합니다]]로 되돌아가거나 [[동기화, 잠금, 내보내기, 테마를 지원하는 Bear Pro]] 및 [[팁과 트릭]]으로 건너뛰세요.'},
        {id:3, title: '팁과 트릭.', content: '가급적 빨리 아이디어를 메모로 전환할 수 있도록 여러 종류의 유익한 기능을 구현하였습니다. 여기서 베어 스킬을 더욱 강화해보세요. 처음부터 시작하고 싶으면 [[베어에 환영합니다]]로 이동하거나, 메모를 [[정리 및 게시]]하는 방법 및 [[동기화, 잠금, 내보내기, 테마를 지원하는 Bear Pro]]에 대해 자세히 알아보세요.'}
    ]);

이렇게 초기값으로 id, title, content를 지정하였다.

const handleClick = (id) => {
       todos.filter((todo) => {
           if (id === todo.id) {
               setActiveTodo(todo);
           }
       })
   };

그래서 onClick를 할 때는 id 값으로 지정을 하여 지정된 id가 나오는 형식으로 만들었다.

git :
https://github.com/jinah26/bearTodolist

profile
새싹 개발자><

0개의 댓글