<aside> ✅ 【今すぐやりましょう！】 PGrit で、 #frontend目標宣言 をつけて React課題 - molecules/Task 〜ひとまず完成を修了する目標日を投稿しましょう！

↓ 例

Untitled

【PGritについて】 PGritに投稿することで、自分のことを知ってもらい、そしてメンバーを知り、仲良くなりましょう！仲良くなると一緒にハッカソンなどのイベントに参加できるかも…?🚀

</aside>

Molecules に入りましたね。ここからは今まで Atoms 等下の階層で作った小さなパーツを組み上げながら、その具体的な機能を与えて、大きなパーツを作っていく工程になります。

Atoms/Checkbox、Atoms/EditButton、Atoms/Input を組み合わせて、まずは見た目を作りましょう。もちろん、配置の調整や非編集時にタスク名を表示する部分は新たにスタイルを書く必要があります。

ディレクトリ構造

src
  └ components
    └ Molecules
      └ Task
        ├ index.jsx
        ├ story.jsx （旧テンプレートの場合）
        └ index.stories.jsx （新テンプレートの場合）

設計（参考）

props名	説明
onTaskNameChange	タスク名の変更が完了したときに実行するコールバック関数。
引数 1 つ
1: 変更後のタスク名
onTaskComplete	タスクのチェックボックスが押下されたときに実行するコールバック関数。
引数なし
taskName	表示するタスク名（デフォルトの値=""）
defaultIsEditing	コンポーネントが生成されたときの[State]isEditing の値（デフォルトの値=false）

state名	説明	データ型	デフォルトの値
isEditing	タスク名が編集中であるかどうか。	boolean	[Props]defaultIsEditing

なし

なし

タスク名の編集が完了したときに実行する。Atoms/Input コンポーネントの Props の onEditComplete に渡す。