【React入門・第4弾】useStateで画面を動かそう！リアルタイム更新フォームの作り方

import { useState } from 'react'
import Header from './Header'
import ProfileCard from './ProfileCard'
import CounterButton from './CounterButton'
import './App.css'

function App() {
  // 1. 配列データを useState で管理
  const [members, setMembers] = useState([
    {
      id: 1,
      avatar: '🚀',
      name: 'React a',
      bio: 'フロントエンド開発を勉強中のエンジニアです！',
    },
    {
      id: 2,
      avatar: '🎨',
      name: 'デザイン b',
      bio: 'UI/UXデザインが得意です。最近CSSアニメーションにハマっています。',
    },
    {
      id: 3,
      avatar: '⚽',
      name: 'スポーツ c',
      bio: '休日はサッカーと筋トレ！Web開発でスポーツアプリを作りたいです。',
    },
  ])

  // 2. フォームの入力値を保持する State（プレビュー用にもそのまま使われます！）
  const [avatar, setAvatar] = useState('')
  const [name, setName] = useState('')
  const [bio, setBio] = useState('')

  // 3. カードを追加する処理
  const handleAddMember = (e) => {
    e.preventDefault()

    if (!name.trim()) return

    const newMember = {
      id: Date.now(),
      avatar: avatar || '👤',
      name: name,
      bio: bio,
    }

    setMembers([...members, newMember])

    // 送信後に入力欄とプレビューをリセット
    setAvatar('')
    setName('')
    setBio('')
  }

  return (
    <div className="app-container">
      <Header />

      <main className="main-content">
        {/* カード追加フォーム */}
        <form className="add-member-form" onSubmit={handleAddMember}>
          <h3>新しいメンバーを追加</h3>
          
          <div className="form-group">
            <input
              type="text"
              placeholder="アイコン (例: 🏀)"
              value={avatar}
              onChange={(e) => setAvatar(e.target.value)}
            />
            <input
              type="text"
              placeholder="名前"
              value={name}
              onChange={(e) => setName(e.target.value)}
            />
            <input
              type="text"
              placeholder="自己紹介"
              value={bio}
              onChange={(e) => setBio(e.target.value)}
            />
          </div>

          {/* 「リアルタイムプレビュー」領域 */}
          <div className="preview-container">
            <p className="preview-title"> 完成イメージ（プレビュー）</p>
            {/* ボタンを押す前でも、State (avatar, name, bio) の変化が即座に反映される */}
            <ProfileCard
              avatar={avatar || '❓'}
              name={name || '（名前を入力中...）'}
              bio={bio || '（自己紹介を入力中...）'}
            />
          </div>

          <button type="submit" className="add-button">
            この内容でカードを追加する
          </button>
        </form>

        {/* 確定したメンバー一覧 */}
        <div className="card-list">
          <h3>メンバー一覧</h3>
          {members.map((member) => (
            <ProfileCard
              key={member.id}
              avatar={member.avatar}
              name={member.name}
              bio={member.bio}
            />
          ))}
        </div>

        <CounterButton />
      </main>
    </div>
  )
}

export default App

// 2. フォームの入力値を保持する State

const [avatar, setAvatar] = useState('')
const [name, setName] = useState('')
const [bio, setBio] = useState('')

<input
  type="text"
  placeholder="名前"
  value={name}                            // メモ帳（State）の中身を表示する
  onChange={(e) => setName(e.target.value)} // キーボードが叩かれたらメモ帳を更新する
/>

【ユーザーの操作】
 ユーザーが「あ」と入力する
       │
       ▼
【onChange が発動】
 `e.target.value`（＝「あ」）を拾って `setName('あ')` を実行！
       │
       ▼
【State が更新される】
 `name` の中身が `''` から `'あ'` に変わる
       │
       ▼
【React が画面を再描画】
 `value={name}` によって、入力欄に「あ」が表示される！

【ユーザーの操作】
 キーボードを叩く / ボタンを押す
       │
       ▼
【State（データ）の更新】
 `setName(...)` や `setMembers(...)` でデータを変える
       │
       ▼
【Reactの自動描画】
 データに合わせて、画面全体を自動で正しく描き直す！

return (
  <div className="app-container">
    <Header />

    <main className="main-content">
      {/* 1. 入力フォーム */}
      <form onSubmit={handleAddMember}>
        <input value={avatar} onChange={(e) => setAvatar(e.target.value)} />
        <input value={name} onChange={(e) => setName(e.target.value)} />
        <input value={bio} onChange={(e) => setBio(e.target.value)} />

        {/* 2. 👁️ リアルタイムプレビュー画面！！ */}
        {/* ボタンを押す前でも、State (nameやbio) の文字がそのまま映し出される */}
        <div className="preview-area">
          <p>👇 完成イメージ（プレビュー）</p>
          <ProfileCard
            avatar={avatar || '❓'} // 空なら「❓」を表示
            name={name || '（名前を入力中...）'} 
            bio={bio || '（自己紹介を入力中...）'}
          />
        </div>

        {/* 3. 追加ボタン */}
        <button type="submit">この内容でカードを追加する</button>
      </form>

      {/* 4. ボタンを押して確定したカード一覧 */}
      <div className="card-list">
        {members.map((member) => (
          <ProfileCard key={member.id} {...member} />
        ))}
      </div>
    </main>
  </div>
)