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

import { useState } from 'react'
import Header from './components/Header'
import ProfileCard from './components/ProfileCard'
import CounterButton from './components/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アニメーションにハマっています。',
    },
  ])
  // 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(), // 簡易的な一意のID
      avatar: avatar || '👤', // 空ならデフォルトアイコン
      name: name,
      bio: bio,
    }
    // 【State更新】元の配列（...members）の最後に新しいメンバーを追加した新しい配列をセット
    setMembers([...members, newMember])
    // 送信後、入力欄とプレビューのStateを空にする（リセット）
    setAvatar('')
    setName('')
    setBio('')
  }
  return (
    <div className="app-container">
      <Header />
      <main className="main-content">
        
        {/* --- カード追加フォーム領域 --- */}
        {/* onSubmit で、エンターキーやボタン押下時に handleAddMember を実行 */}
        <form className="profile-card" onSubmit={handleAddMember} style={{padding: '2rem', marginBottom: '2rem', border: '2px solid #ddd'}}>
          <h3 style={{marginBottom: '1rem'}}>新しいメンバーを追加</h3>
          
          {/* 各 input の value に State を紐づけ、onChange で State を更新 */}
          <div style={{display: 'flex', flexDirection: 'column', gap: '0.5rem', marginBottom: '1.5rem'}}>
            <input
              type="text"
              placeholder="アイコン (例: 🏀)"
              value={avatar}
              onChange={(e) => setAvatar(e.target.value)}
              style={{padding: '0.5rem', borderRadius: '4px', border: '1px solid #ccc'}}
            />
            <input
              type="text"
              placeholder="名前（必須）"
              value={name}
              onChange={(e) => setName(e.target.value)}
              style={{padding: '0.5rem', borderRadius: '4px', border: '1px solid #ccc'}}
            />
            <input
              type="text"
              placeholder="自己紹介"
              value={bio}
              onChange={(e) => setBio(e.target.value)}
              style={{padding: '0.5rem', borderRadius: '4px', border: '1px solid #ccc'}}
            />
          </div>
          {/* 👁️ 「リアルタイムプレビュー」領域 */}
          <div style={{marginBottom: '1.5rem', textAlign: 'center'}}>
            <p style={{fontSize: '0.9rem', color: '#666', marginBottom: '0.5rem'}}>👇 完成イメージ（プレビュー）</p>
            {/* まだ確定前（members配列に入れる前）の State (avatar, name, bio) をそのまま Props で渡す */}
            <ProfileCard
              avatar={avatar || '❓'} // 空なら「❓」を表示
              name={name || '（名前を入力中...）'} 
              bio={bio || '（自己紹介を入力中...）'}
            />
          </div>
          {/* submitボタン */}
          <button type="submit" className="like-button" style={{width: '100%'}}>
            この内容でカードを追加する
          </button>
        </form>
        {/* ------------------------------- */}
        {/* 確定したメンバー一覧（前回の繰り返し描画） */}
        <div className="main-content" style={{width: '100%'}}>
          <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>
)