Reactالدالة useState()

import { useState } from "react";

const [state, setState] = useState(initialState);

import { useState } from "react";

// MyComponent هنا قمنا بتعريف دالة تمثل مكوّن إسمه
function MyComponent() {
    // setCounter() قيمته الأولية 0 و يمكن تحديث قيمته من خلال استدعاء دالة إسمها counter هنا قمنا بتعريف متغير إسمه
    const [counter, setCounter] = useState(0);
    
    // المربوطة به counter و جعلناها فقط تقوم بإضافة 1 على قيمة المتغير increment() هنا قمنا بتعريف الدالة
    function increment() {
        setCounter(value => value + 1);
    }
    
    // و زر يتيح تحديثها counter و قد عرضنا فيه قيمة MyComponent هنا قمنا بتحضير ما سيتم عرضه عند تضمين المكوّن
    return (
        <>
            <p>Counter value is {counter}</p>
            <button onClick={()=> increment()}>Increase counter</button>
        </>
    );
}

// يمكن الوصول إليه من خارج هذا الملف MyComponent هنا قمنا بجعل المكون
export default MyComponent;

import { useState } from "react";

// MyComponent هنا قمنا بتعريف دالة تمثل مكوّن إسمه
function MyComponent() {
    // setCounter() قيمته الأولية 0 و يمكن تحديث قيمته من خلال استدعاء دالة إسمها counter هنا قمنا بتعريف متغير إسمه
    const [counter, setCounter] = useState(0);
    
    // المربوطة به counter و جعلناها فقط تقوم بإضافة 1 على قيمة المتغير increment() هنا قمنا بتعريف الدالة
    function increment() {
        setCounter(value => value + 1);
    }
    
    // المربوطة به counter و جعلناها فقط تقوم بإنقاص 1 من قيمة المتغير decrement() هنا قمنا بتعريف الدالة
    function decrement() {
        setCounter(value => value - 1);
    }
    
    // و قد عرضنا فيه MyComponent هنا قمنا بتحضير ما سيتم عرضه عند تضمين المكوّن
    //  بالإضافة إلى زر يقوم بزيادة قيمته واحداً و زر يقوم بإنقاصها واحداً counter قيمة المتغير 
    return (
        <>
            <button onClick={()=> decrement()}>-1</button>
            <span>{counter}</span>
            <button onClick={()=> increment()}>+1</button>
        </>
    );
}

// يمكن الوصول إليه من خارج هذا الملف MyComponent هنا قمنا بجعل المكون
export default MyComponent;

import { useState } from "react";

// MyComponent هنا قمنا بتعريف دالة تمثل مكوّن إسمه
function MyComponent() {
    // setText() قيمته الأولية نص فارغ و يمكن تحديث قيمته من خلال استدعاء دالة إسمها text هنا قمنا بتعريف متغير إسمه
    const [text, setText] = useState("");
    
    // المربوطة به text و جعلناها تقوم بوضع قيمة مربع النص الحالية في المتغير handleChange() هنا قمنا بتعريف الدالة
    function handleChange(e) {
        setText(value => e.target.value);
    }
    
    // text و قد عرضنا فيه مربع النص و قيمة المتغير MyComponent هنا قمنا بتحضير ما سيتم عرضه عند تضمين المكوّن
    return (
        <>
            <input onChange={(e)=> handleChange(e)} />
            <p>You typed: {text}</p>
        </>
    );
}

// يمكن الوصول إليه من خارج هذا الملف MyComponent هنا قمنا بجعل المكون
export default MyComponent;

import { useState } from "react";

// MyComponent هنا قمنا بتعريف دالة تمثل مكوّن إسمه
function MyComponent() {
    // setLiked() و يمكن تحديث قيمته من خلال استدعاء دالة إسمها true قيمته الأولية text هنا قمنا بتعريف متغير إسمه
    const [liked, setLiked] = useState(true);
    
    // المربوطة به liked و جعلناها تقوم بوضع قيمة خانة الإختيار الحالية في المتغير handleChange() هنا قمنا بتعريف الدالة
    function handleChange(e) {
        setLiked(e.target.checked);
    }
    
    // liked و قد عرضنا فيه خانة إختيار و قيمة المتغير MyComponent هنا قمنا بتحضير ما سيتم عرضه عند تضمين المكوّن
    return (
        <>
            <label>
                <input
                    type="checkbox" 
                    checked={liked}
                    onChange={(e)=> handleChange(e)}
                />
                Learn React.
            </label>
            <p>Learn React is {liked ? 'checked': 'not checked'}.</p>
        </>
    );
}

// يمكن الوصول إليه من خارج هذا الملف MyComponent هنا قمنا بجعل المكون
export default MyComponent;

import { useState } from "react";

// MyComponent هنا قمنا بتعريف دالة تمثل مكوّن إسمه
function MyComponent() {
    // setForm() عبارة عن كائن و يمكن تحديث قيم خصائصه من خلال استدعاء دالة إسمها form هنا قمنا بتعريف متغير إسمه
    const [form, setForm] = useState({
        firstName: 'Mhamad',
        lastName: 'Harmush',
        email: 'mhamad.harmush@example.com'
    });

    // form الموجودة في الكائن firstName و مهمتها تحديث قيمة الخاصية setFirstName هنا قمنا بتعريف دالة إسمها
    // الحالية و من ثم تقوم بإسناد القيمة الجديدة form فعلياً الدالة تقوم بإنشاء نسخة من جميع خصائص و قيم الكائن
    // form الموجودة في الكائن firstName التي يتم إدخالها في الحقل الذي قام باستدعائها في الخاصية  
    function setFirstName(e) {
        setForm({
            ...form, // form هنا قمنا بوضع نسخة من الخصائص و القيم السابقة الموجودة في الكائن
            firstName: e.target.value // firstName هنا قمنا بتحديث قيمة الخاصية
        });
    }

    // form الموجودة في الكائن lastName و مهمتها تحديث قيمة الخاصية setLastName هنا قمنا بتعريف دالة إسمها
    // الحالية و من ثم تقوم بإسناد القيمة الجديدة form فعلياً الدالة تقوم بإنشاء نسخة من جميع خصائص و قيم الكائن
    // form الموجودة في الكائن lastName التي يتم إدخالها في الحقل الذي قام باستدعائها في الخاصية  
    function setLastName(e) {
        setForm({
            ...form, // form هنا قمنا بوضع نسخة من الخصائص و القيم السابقة الموجودة في الكائن
            lastName: e.target.value // lastName هنا قمنا بتحديث قيمة الخاصية
        });
    }

    // form الموجودة في الكائن email و مهمتها تحديث قيمة الخاصية setEmail هنا قمنا بتعريف دالة إسمها
    // الحالية و من ثم تقوم بإسناد القيمة الجديدة form فعلياً الدالة تقوم بإنشاء نسخة من جميع خصائص و قيم الكائن
    // form الموجودة في الكائن email التي يتم إدخالها في الحقل الذي قام باستدعائها في الخاصية  
    function setEmail(e) {
        setForm({
            ...form, // form هنا قمنا بوضع نسخة من الخصائص و القيم السابقة الموجودة في الكائن
            email: e.target.value // email هنا قمنا بتحديث قيمة الخاصية
        });
    }

    // و قد عرضنا فيه 3 حقول بالإضافة إلى فقرة MyComponent هنا قمنا بتحضير ما سيتم عرضه عند تضمين المكوّن
    return (
        <>
            <label>
                First Name
                <input value={form.firstName} onChange={(e)=> setFirstName(e)}/>
            </label>
            <label>
                Last Name
                <input value={form.lastName} onChange={(e)=> setLastName(e)}/>
            </label>
            <label>
                Email
                <input value={form.email} onChange={(e)=> setEmail(e)}/>
            </label>
            <p>
                {form.firstName}{' '}
                {form.lastName}{' '}
                ({form.email})
            </p>
        </>
    );
}

// يمكن الوصول إليه من خارج هذا الملف MyComponent هنا قمنا بجعل المكون
export default MyComponent;

import { useState } from "react";

// تلقائي (id) هذا المتغير سنستخدمه لإعطاء أي مستخدم جديد يتم إضافته رقم تعرفة
var nextId = 4;

// MyComponent هنا قمنا بتعريف دالة تمثل مكوّن إسمه
function MyComponent() {

    // عبارة عن مصفوفة من الكائنات initialUsers هنا قمنا بتعريف مصفوفة إسمها
    // مع الإشارة إلى أن كل كائن منهم يحتوي على المعلومات الخاصة بمستخدم واحد
    const initialUsers = [
        {id: 1, username: "Mhamad", isEditing: false},
        {id: 2, username: "Hala", isEditing: false},
        {id: 3, username: "Ayman", isEditing: false},
    ];

    // مما يعني initialUsers وضعنا فيه قيم المصفوفة users هنا قمنا بتعريف متغير إسمه
    // setUsers أنه عبارة عن مصفوفة و يمكن تحديث قيمها من خلال استدعاء دالة إسمها 
    const [users, setUsers] = useState(initialUsers);
    
    // قيمته الأولية نص فارغ newUsername هنا قمنا بتعريف متغير إسمه
    // setNewUsername و يمكن تحديث قيمته من خلال استدعاء دالة إسمها 
    // سنستخدم هذا المتغير بشكل مؤقت لتخزين إسم أي مستخدم جديد يتم إضافته 
    const [newUsername, setNewUsername] = useState("");

    // تستخدم لإضافة مستخدم جديد addNewUser هنا قمنا بتعريف دالة إسمها
    // مع إعطائه users فعلياً الدالة تقوم بإنشاء كائن جديد و إضافته في المصفوفة
    // nextId بشكل تلقائي نسبةً لآخر قيمة تم إضافتها في المتغير id قيمة للخاصية 
    // newUsername بالإضافة إلى إسم المستخدم المُدخل في الحقل المربوط بالمتغير  
    function addNewUser() {
        // هنا وضعنا شرط لمنع إضافة المستخدم إن لم يتم إعطاؤه إسم أولي
        if (newUsername.trim() == "") {
            alert("Please enter a username for the new user.");
            return;
        }
        // هنا قمنا بإضافة المستخدم مع إعطاؤه إسم المستخدم المُدخل في الحقل
        setUsers([
            ...users,
            {id: nextId++, username: newUsername},
        ]);
        // هنا قمنا بحذف إسم المستخدم المُدخل في الحقل بعد أن قمنا بإضافته للكائن
        setNewUsername("");
    }

    // تستخدم للسماح بتحديث معلومات مستخدم محدد editUser هنا قمنا بتعريف دالة إسمها
    // users فعلياً الدالة تقوم بالمرور على جميع الكائنات الموجودة في المصفوفة
    // هو الذي ستقف عنده و تحدث id الكائن الذي تجده يملك نفس قيمة البارميتر 
    // من أجل أن يصبح بالإمكان تعديل قيمه true فيه إلى isEditing قيمة الخاصية 
    function editUser(id) {
        setUsers(
            users.map((user) =>
                user.id === id ? {...user, isEditing: true} : user
            )
        );
    }

    // تستخدم لإيقاف السماح بتحديث معلومات المستخدم stopEditUser هنا قمنا بتعريف دالة إسمها
    // users فعلياً الدالة تقوم بالمرور على جميع الكائنات الموجودة في المصفوفة
    // هو الذي ستقف عنده و تحدث id الكائن الذي تجده يملك نفس قيمة البارميتر 
    // من أجل إخفاء حقل التعديل false فيه إلى isEditing جميع قيمه بالإضافة مع إعادة قيمة الخاصية 
    function stopEditUser(id) {
        setUsers(
            users.map((user) =>
                user.id === id ? {...user, isEditing: false} : user
            )
        );
    }

    // تستخدم لحذف مستخدم محدد deleteUser هنا قمنا بتعريف دالة إسمها
    // users فعلياً الدالة تقوم بالمرور على جميع الكائنات الموجودة في المصفوفة
    // هو الذي تقوم بحذفه منها id الكائن الذي تجده يملك نفس قيمة البارميتر 
    function deleteUser(id) {
        setUsers(users.filter((user) => user.id !== id));
    }

    // MyComponent هنا قمنا بتحضير ما سيتم عرضه عند تضمين المكوّن
    return (
        <>
            {/* هنا قمنا بعرض الحاوية التي تسمح بإضافة مستخدم جديد */}
            <div className="add-user-box">
                <input placeholder="Enter Username" value={newUsername} onChange={(e) => setNewUsername(e.target.value)} />
                <button onClick={() => addNewUser()}>Add New User</button>
            </div>

            {/* هنا قمنا بعرض قائمة فيها جميع المستخدمين */}
            <ul>
                {users.map((user) => (
                    <li key={user.id}>

                        {user.isEditing && (
                            <>
                                <input
                                    value={user.username}
                                    onChange={(e) =>
                                        setUsers(
                                            users.map((u) =>
                                                u.id === user.id ?{...u, username: e.target.value} : u
                                            )
                                        )
                                    }
                                />
                                <button onClick={() => stopEditUser(user.id)}>Stop Editing</button>
                                <button onClick={() => deleteUser(user.id)}>Delete</button>
                            </>
                        )}

                        {!user.isEditing && (
                            <>
                                <span>{user.username}</span>
                                <button onClick={() => editUser(user.id)}>Edit</button>
                            </>
                        )}
                    </li>
                ))}
            </ul>

            {/* هنا قمنا بعرض إجمالي عدد المستخدمين */}
            <p>Total Users: {users.length}</p>
        </>
    );
}

export default MyComponent;