<aside> 💡 要素の横幅は、親要素の幅いっぱいに広がるようにしましょう。

</aside>

ここに来ていよいよ難関です。 React の新要素が 2 つも飛び出します。

まずは見た目を作っていきましょう。一つの input 要素に対してスタイルをあてていく感じになります。 index.jsx と story.jsx を作成してください。

ディレクトリ構造

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

推奨設計について

作成難易度の高いコンポーネントを中心として、「設計（参考）」という項目を記載してあります。

これは、完成系の React コンポーネントを構成する要素を全て書き下したものとなります。

そのため、これを正しく読み取ることでコンポーネントを作成することができます。

一通り説明に目を通した後、それを確かめながらこの項目を確認し、コードに起こしてみましょう。

ただし、これはあくまで模範解答の設計であるので、他にやり方が思い付くならばそちらを試してみる方が勉強になるのでおすすめです。

props名	説明
onEditComplete	入力中に Enter が押された、または input 要素からフォーカスが外れたときに実行するコールバック関数
引数: 1 つ
1: その時点で input 要素に入力されたテキスト
defaultValue	この要素を作ったときに最初に input に入れておくテキスト。一度作成したタスクを後から編集するときに使用する。（デフォルトの値=""）

なし