React: أساسيات State: useState

import { useState } from 'react'

// useState(initialValue) Back [value, setValue]
const [count, setCount] = useState(0)
//      ^      ^          ^
//      |      |          └─ Initial value（Applies only to the first render）
//      |      └─ Update Function（Triggers a re-render after being called）
//      └─ Current status value（Get the latest value on every render）

الحالة: arr

// ============================================
// Example：React Array Operations in C 6 Common Scenarios
// ============================================

const [arr, setArr] = useState([1, 2, 3])

// 1. Append to the end
setArr([...arr, 4])           // [1, 2, 3, 4]

// 2. Add to the beginning
setArr([0, ...arr])           // [0, 1, 2, 3]

// 3. Insert in the middle
const insertAt = 1
setArr([...arr.slice(0, insertAt), 99, ...arr.slice(insertAt)])
                              // [1, 99, 2, 3]

// 4. Delete Element（filter）
setArr(arr.filter(n => n !== 2))  // [1, 3]

// 5. Update Element（map）
setArr(arr.map(n => n === 2 ? 22 : n))  // [1, 22, 3]

// 6. Sort（Copy first, then sort）
setArr([...arr].sort((a, b) => b - a))  // [3, 2, 1]

عمليات على حالة المصفوفة: push → إضافة عنصر، filter → حذف عنصر، map → تحديث عنصر. كل عملية تُعيد مرجع مصفوفة جديدًا حتى يعيد React العرض

function RegistrationForm() {
  // ✅ Recommendations：Logical Breakdown
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [errors, setErrors] = useState({})

  // ❌ Not recommended：All states are stored in a single object
  const [form, setForm] = useState({
    name: '', email: '', password: '',
    isSubmitting: false, errors: {}
  })
  // Expand the entire object when updating，Fields that are easy to overlook
}

الحالة: arr (setter: setArr)

عند إدخال 100 بالدرجة المئوية → تُعرض تلقائيًا 212.0 بالفهرنهايت. يعرض "100°C = 212.0°F". حقلا الإدخال يبقيان متزامنين.

العنوان الفرعي: "Temperature Converter". يعرض: "Celsius（°C）：". الحالة: temperature (setter: setTemperature)

function UserEditor() {
  const [user, setUser] = useState({ name: 'Alice', email: 'alice@test.com', age: 28 })

  function updateField(field, value) {
    setUser(prev => ({ ...prev, [field]: value }))
  }

  return (
    <div style={{ maxWidth: 400, margin: '0 auto' }}>
      <h3>Edit Profile</h3>
      <input value={user.name} onChange={e => updateField('name', e.target.value)}
        placeholder="Name" style={{ width: '100%', padding: 8, marginBottom: 8, borderRadius: 4 }} />
      <input value={user.email} onChange={e => updateField('email', e.target.value)}
        placeholder="Email" style={{ width: '100%', padding: 8, marginBottom: 8, borderRadius: 4 }} />
      <input type="number" value={user.age} onChange={e => updateField('age', Number(e.target.value))}
        placeholder="Age" style={{ width: '100%', padding: 8, marginBottom: 8, borderRadius: 4 }} />
      <pre style={{ background: '#f5f5f5', padding: 12, borderRadius: 4, fontSize: 13 }}>
        {JSON.stringify(user, null, 2)}
      </pre>
    </div>
  )
}

الحالة: address. حقول الإدخال: Street، City، ZIP

يعرض: "Edit Profile". الحالة: user (setter: setUser). الإدخال: Name، Email، Age

نموذج عنوان الشحن: Street، City، ZIP، قائمة منسدلة للدولة (US/CN/JP)، مربع اختيار "Primary address". كل الحقول تُحدث الحالة بشكل تفاعلي.

يعرض: "Shipping Address". الحالة: address (setter: setAddress). الإدخال: Street، City، ZIP. القائمة المنسدلة: United States، China، Japan

Score: 0، Multiplier: x1. الأزرار +10/+50/+100 تضيف نقاطًا بمقدار (النقاط × المضاعف). "2x Multiplier" يضاعف المضاعف (حتى x8). Reset → Score: 0، x1