عمر قره محمد

جرب جعل الـ state بشكل array مثل :
const [selected, setSelected] = useState([]); وتقوم بإضافة كل الـ index إليه كالتالي :
const handleClick = (id) => { // نفحص إن كانت الحالة تحتوي على العنصر وعندها نقوم بحذف العنصر if(selected.includes(id)) setSelected(selected.filter(item=> item !== id)) // إذا لم تكن تحتوي على العنصر فنقوم بإضافته else setSelected([...selected , id]) } وهكذا يصبح الـ selected هو عبارة عن مصفوفة العناصر المحددة، وتعدل كود الـ jsx للشكل :
<div className = { selected.includes(i) ? "seat selected" : "seat"} key={i} onClick = {()=>handleClick(i)} ></div>  

هذه مجموعة من افكار المشاريع باستخدام الـ MERN stack والتي تعني   (react - express - mongo dB - Node)  :
موقع ويب أسئلة وأجوبة  موقع ويب يمثل متجر إلكتروني موقع ويب عن السياحة والسفر  موقع ويب عن الأخبار  موقع ويب عن الموضة والأزياء  موقع ويب مختص بالطب و الصحة  موقع ويب متخصص في وساطة الخدمات مثل (خمسات ومستقل وغيرها)  موقع ويب عن الكورسات  مدونة موقع تعريفي لشركة مع مدونة موقع افلام ومسلسلات موقع تواصل اجتماعي موقع بيع خدمات الكترونية sass  موقع خدمات مصرفية وما ارشحه بشكل كبير لك هو انشاء موقع ويب يمثل متجر إلكتروني وذلك لأنه قد تتمكن من بيعه بسهولة في المستقبل.
 

جرب فتح الموقع على متصفح آخر مثل edge وفي حال لم يعمل جرب أن تفتح الموقع على جهاز مختلف.
في حال لم يعمل رغم الطريقتين السابقتين جرب تشغيل بروكسي.
في حال لم يعمل رغم الحلول السابقة قم بالتواصل مع الدعم من هنا
 

االكود الخاص بك :
const item = useSelector((state) => state.products.SingleProduct); الكود الصحيح :
const item = useSelector((state) => state.products.singleProduct); حيث انك كتبت singleProduct بحرف S كبير، بينما الاسم الصحي بالـ s الصغير.

عدل الكود للشكل :
import React from "react"; import ReactDOM from 'react-dom'; import * as ReactDOMClient from 'react-dom/client'; import "./index.css"; import App from "./App"; const root = ReactDOMClient.createRoot(document.getElementById("root")); root.render( <React.StrictMode> <App /> </React.StrictMode> ); تم تعديل الكود السابق وإضافة الـ :
 
import ReactDOM from 'react-dom';  

المشكلة هي انك تظهر كل لوحات التعديل الخاصة بكل المنشورات دفعة واحدة وذلك لأنك وضعت الشرط 
{ isEdit && <Edit setIsEdit={setIsEdit} title={title} description={description} post={post} /> } داخل ال map التي تطبع كل المنشورات ولذلك فعندما يتحقق الشرط السابق ستظهر كل المكونات الـ Edit الخاصة بكل المنشورات.
ولحل المشكلة يجب اخراج المكونة الخاصة بالتعديل Edit إلى خارج الـ map بحيث يكون هنالك Edit واحدة ولكن نمرر لها عنصر مختلف في كل مرة، وهذا سيتطلب إنشاء state جديدة لتحتوي هذا العنصر.
ليصبح الكود كالتالي :
import React, { useState } from 'react' import Form from 'react-bootstrap/Form'; import InputGroup from 'react-bootstrap/InputGroup'; import Container from 'react-bootstrap/Container'; import Button from 'react-bootstrap/Button'; import { useDispatch, useSelector } from 'react-redux'; import { addPosts, deletePost } from '../redux/postsSlice'; import Edit from './Edit'; function Posts() { const [title, setTitle] = useState("") const [description, setDescription] = useState("") const [selectedPost, setSelectedPost] = useState("") // نضيف الوظيفة التالية ************ const dispatch = useDispatch() const posts = useSelector((state) => state.posts.postsArray) const handleClick = () => { dispatch(addPosts({ id: posts.length + 1, title, description, })) setTitle("") setDescription("") } // delete a post const handleDelete = (item) => { dispatch(deletePost(item)) } // Edit a Post const [isEdit, setIsEdit] = useState(false) // نعدل الوظيفة التالية **************************************** const handleEdit = (post) => { // اضفنا الباراميتر ************************************ setIsEdit(true) setSelectedPost(post) // الكود المضاف ************************************ } return ( <div className='posts'> <Container className='form'> <InputGroup className="mb-3"> <Form.Control style={{ color: '#000' }} placeholder='Post Title' value={title} onChange={(e) => setTitle(e.target.value)} /> </InputGroup> <InputGroup className="mb-3"> <Form.Control as="textarea" placeholder="Post Description" style={{ height: '100px', color: '#000' }} value={description} onChange={(e) => setDescription(e.target.value)} /> </InputGroup> <Button variant="primary" size="lg" onClick={handleClick} > Add Post </Button> </Container> <div className='posts'> { posts.length > 0 ? posts.map((post, index) => <div className='post-container' key={index} > <div className='post-title'> <h3>{post.title}</h3> </div> <div className='post-description'> <h5>{post.description}</h5> </div> <div className='btns'> <Button variant="outline-info" onClick={() => handleEdit(post)} > Edit </Button> <Button variant="outline-info" onClick={() => handleDelete(post.id)} > Delete </Button> </div> </div> ) : (<h1 className='no-posts'>No Posts</h1>) } {/* map نخرج المكون الخاص بالتعديل إلى خارج الـ *************************************/} { isEdit && <Edit setIsEdit={setIsEdit} title={selectedPost.title} // الكود المعدل ************************************ description={selectedPost.description}// الكود المعدل ************************************ post={selectedPost}// الكود المعدل ************************************ /> } </div> </div> ) } export default Posts  

نعم يمكنك فعل ذلك ولكن لا تهمل الجانب التطبيقي ، فكثير من المبرمجين يقومون بإهمال الجانب التطبيقي في اوقات الدراسة المكثفة،
و قد يفيدك الالتزام في النصائح الواردة في هذا النقاش :
 
 

لمتابعة احدث التقنيات هنالك عدد من النصائح ومنها :
متابعة رواد المجال الذي تهتم فيه، ففي مجال برمجة المواقع سيكون مفيداً متابعة مقالات حسوب عن البرمجة فكل يوم هنالك عدد من المقالات يناقش مختلف تقنيات البرمجة. كذلك يقيد الانضمام لمجموعات التواصل الاجتماعي في المجال الذي تهتم فيه. متابعة التوثيقات الرسمية للبيئات التي تستخدمها، فمثلاً react لديها مدونة خاصة بها تنشر فيها اخر الأخبار. الحصول على اصدقاء مهتمين بنفس المجال، ويمكنك الوصول إليهم بسهولة عبر مواقع التواصل. قد يفيد كذلك متابعة المواقع المختصة في أخبار البرمجة وهي كثيرة.  

عدل الكود للشكل التالي :
const handlePrevClick = () => { const box = carrouselRef.current; let width = box.clientWidth; box.scrollLeft = box.scrollLeft - width; }; const handleNextClick = () => { const box = carrouselRef.current; let width = box.clientWidth; box.scrollLeft = box.scrollLeft + width; }; بحيث تعرف الـ box داخل كل وظيفة بدلاً م ان تعرفه خارج الوظائف.
وسبب المشكلة انك تعرف الـ box والذي هو عبارة عن useRef قبل ان تقوم بإسناد الـ useRef للعنصر الذي تريد التحكم به وفي هذه الحالة تكون قيمته undefined وهو يعمل عند اضافة الـ console.log بسبب خواص react والتي تسمح للتطبيع بالتحديث بدون اعادة تحميل الصفحة بالكامل.
بينما في الشكل الثاني تقوم بتعرفي الـ box بعد ان تم اسناد الـ useRef.

اعتقد ان ذلك لحدث لأنك تضع الخاصية للعنصر container الموجود داخل الـ footer بينما الصحيح ان تضع الخاصية للعنصر container الموجود قبل الـ footer والذي يحتوي مكونات الصفحة الرئيسية.
والفكرة من الخاصية السابقة هي ان العنصر الذي يسبق الـ footer سيصبح اطول وبالتالي لن يبقى هنالك فراغ في الصفحة بعد الـ footer

المشكلة هي انك وضعت ملف الصور في الملف src والصحيح ان يكون في الملف public،
قم بنقل ملف الصور images إلى الملف public :

ثم قم بتعديل روابط الصور إلى الشكل :
const bannerImgs = [ { id: 1, src: "images/banner/img-1.jpg", }, { id: 2, src: "images/banner/img-2.jpg", }, { id: 3, src: "images/banner/img-3.jpg", }, { id: 4, src: "images/banner/img-4.jpg", }, { id: 5, src: "images/banner/img-5.jpg", }, { id: 6, src: "images/banner/img-6.jpg", }, ]; وبعدها يجب ان يعمل الكود.

المشكلة انك اضفت النقطة قبل اسم الكلاس،
ولكننا كما تعلم لا نضيف نقطة لاسم الكلاس في الـ html .
جرب اضافة اسم الكلاس بدون نقطة وحاول مرة ثانية :
const animateNav = () => { nav === 'navbar-links' ? setNav('navbar-links active-navbar') : setNav('navbar-links') }  

لكل منهما ميزاته وعيوبه، ويمكنك بناء اي موقع باستخدام اي واحد بينهما.
وهنالك العديد من النقاشات حول هذا الموضوع وانصحك ان تطلع عليها بالترتيب :
 
ويمكنك الاطلاع على هذه :
 
 
وبالنسبة للسوق العربية :
 
المقارنة الاشمل :
 
 

هنالك الكثير من الطرق للتعلم وكل شخص يستخدم الطريقة الافضل بالنسبة له للتعلم، ولكن سأشارك معك بعض التقنيات التي قد تساعدك في دراسة الدورة بالشكل الصحيح.
التطبيق خلف المدرب باستمرار، والافضل بينها هو مشاهدة الدرس بالكامل ومن ثم محاولة التطبيق وفي حال وجدت اي مشكلة تعود للدرس وتتأكد من الكود. تلخيص الافكار التي تشاهدها في الدرس، وهذا سيساعدك في اتمام الخطوة 1 بشكل افضل ويساعد كذلك في تركيز المعلومات. الاحتفاظ بالاكواد التي تكتبها خلال التطبيق خلف المدرب و تنسيقها بشكل جيد واضافة ملاحظات لكل خطوة، وذلك حتى تستطيع العودة إليها بسهولة والاستفادة منها. مشاهدة الفيديوهات المعقدة اكثر من مرة، وذلك لأن بعض الدروس قد تحتوي مفاهيم جديدة بالكامل وهذا النوع من الدروس يحتاج تركيز اكبر. السؤال عن المواضيع الغامضة او التي تجد صعوبة في فهمها. مراجعة الملخصات التي تقوم بإنشائها بعد الانتهاء من كل مسار. وقد يفيدك الاطلاع على النقاش الآتي :
 
 

اعتقد ان المشكلة بسبب الـ :
e.preventDefault() الموجودة في الوظيفة handleToggle.
جرب حذفها وحاول مرة ثانية.

افضل برامج خدمة العملاء باللغة العربية هو برنامج زيتون ويتميز بواجهة عربية بالكامل.
الموقع الرسمي لزيتون
 

يمكنك حل المشكلة بتعديل الوظيفة subCategoryProducts إلى الشكل التالي :
const subCategoryProducts = (item) => { let subCategory = item.target.innerText.toUpperCase(); localStorage.setItem("category", subCategory); }; وتقوم بإضافة الكود التالي إلى صفحة الـ SubCategory.jsx :
const [filteredData, setFilteredData] = useState([]); useEffect(() => { const subCategory = localStorage.getItem("category"); let subCategoryArray = data.filter((prod) => prod.category.toUpperCase() === subCategory); setFilteredData(subCategoryArray); }, []); ولا تنسى استدعاء كل من :
import { useEffect, useState } from "react"; import data from "../../components/data";  
ولكن سيظل هذا عبارة عن حل سريع، حيث ان الطريقة الافضل هي استخدام الـ dynamic routes حيث تحدد الـ category باستخدام الـ route وإذا لم تكن على دراية بها فأنصحك بالتعلم عنها واستخدامها.

الـ useEffect يتم استدعائها مرة واحدة عند تحميل المكون عندما يكون الـ parameter الثاني يساوي [].
وبالتالي فإنها سيتم استدعائها في كل مرة تقوم بفتح المكون Shop أو App وعند الانتقال بين الصفحات والخروج من المكون Shop سيتم اغلاقه وعند العودة إلى المكون Shop سيتم فتح المكون Shop مرة ثانية وبالتالي سيتم استدعاء الـ useEffect الخاص به.
أما المكون App فلن يتأثر بالانتقال بين الصفحات لأنك لا تغلقه ولا تفتحه في عملية الانتقال فهو الاب لكل المكونات ويتم تحميله مرة واحدة عند تحميل الصفحة.

على ما يبدو ان المشكلة بسبب كون ال state لمسماة filtered تستخدم من اجل الـ category فقط وبالتالي فلا تستطيع استخدامها من اجل التقييم.
وإذا اردت تطبيق فكرة النجوم يجب انشاء state جديدة ولتكن stars  :
const [stars, setStars] = useState(-1); وان تعدل الوظيفة لتصبح :
const filterByRating = () =>{ setStars(currentValue) } ونضيف الوظيفة التالية والخاصة بعملية الفلترة :
const filterTheData = () => { const filteredByCategory = checked.length === 0 ? data : data.filter(product => checked.includes(product.category)); const filteredData = stars === -1 ? filteredByCategory : filteredByCategory.filter(product => Math.round(product.rate) === stars); return filteredData; } وبدلاً من الشروط التي كنا قد وضعنا في الـ return نبدلها للشكل التالي :
return ( <div className="App"> <Header numLikes = {numLikes} /> <div className='main'> <Aside categories = { categories } handleCheck = {handleCheck} handleRateClick = {handleRateClick} currentValue = {currentValue} /> { <div className='products-section'> { filterTheData().map(product => <Product key = {product.id} id = {product.id} title = {product.title} img = {product.img} price = {product.price} rating = {product.rate} handleLike = {handleLike} /> } </div> } </div> </div> );  

يبدو ان المشكلة في الشرط الخاص بك، حيث ان الـ color هنا معطى للكلاس وليس للعنصر نفسه وبالتالي فالشرط التالي :
el.target.style.color !== "#F05454" لن يكون صحيحاً في اي وقت من الاوقات.
والمشكلة الثانية هي انك تقوم بعمل الـ toggle قبل الشرط وبالتالي فإن العنصر إذا لم يكن مفعل سيفعل ثم سيتم 
والحل هو ان تغير الوظيفة إلى الشكل التالي :
const handleLike = (el) => { if (el.target.className.includes("toggle-like-btn-icon")) { setNumLikes(numLikes - 1) el.target.classList.toggle('toggle-like-btn-icon') } else { setNumLikes(numLikes + 1) el.target.classList.toggle('toggle-like-btn-icon') } } بحيث يكون الشرط هو احتواء الـ className على الـ class المسمى toggle-like-btn-icon.

يمكنك حل المشكلة بتغيير الوظيفة handleCheck إلى الشكل التالي :
const handleCheck = (event) => { if (checked.includes(event.target.value)) { // checked في حال كان العنصر المنقو موجود سابقاً في الـ let updated = checked.filter(item => item !== event.target.value) // بحيث لا يبقى العنصر المنقور checked فلتر الـ setChecked(updated) // checked حديث الـ } else { let updated = [...checked, event.target.value] setChecked(updated) } } حيث في حال كانت الـ state المسمات checked تحتوي على الـ event.target.value (أي إذا كان الـ checkbox منقور سابقاً) تقوم بعمل فلترة لهذه الـ checked بحيث يتم إبقاء العناصر التي قيمتها لا تساوي event.target.value (أي حذف العنصر الذي قيمته event.target.value).
 

في موقع أكاديمية حسوب نقوم بمساعدة المبرمجين على تعلم لغات البرمجة ومساعدتهم في اصلاح الاخطاء التي ربما يقعون فيها.
فإذا كان لديك كود وتريد منا الاطلاع عليه او انك تعاني من مشكلة في كتابة الكود فرجاءً قم بمشاركة المشكلة أو الكود الخاص بك.
وإن كنت تريد البدئ في تعلم البرمجة وبناء الكود بنفسك فيمكنك البدئ من هنا :
وإذا كنت تبحث عن مبرمجين لتنفيذ المشروع الخاص بك فيمكنك العثور على مبرمجين في موقع مستقل من هنا، وانا متوفر على مستقل كذلك وهذا حسابي.

الخطأ في عملية الاستيراد للبيانات، لاحظ :
// الكود الخاص بك import { hp1 } from './../images/hp-1.png' import { asus1 } from '../images/asus-1.png' import { asus2 } from '../images/asus-3.png' import { dell1 } from '../images/dell-1.png' import { dell2 } from '../images/dell-2.png' import { dell3 } from '../images/dell-3.png' import { hp2 } from '../images/hp-2.png' import { hp3 } from '../images/hp-3.png' import { lenovo1 } from '../images/lenovo-1.png' import { lenovo2 } from '../images/lenovo-2.png' import { lenovo3 } from '../images/lenovo-3.png' import { toshiba1 } from '../images/toshiba-1.png' import { toshiba2 } from '../images/toshiba-2.png' import { toshiba3 } from '../images/toshiba-3.png' import { product1 } from '../images/product-1.png' import { product2 } from '../images/product-2.png' import { product3 } from '../images/product-3.png' import { product4 } from '../images/product-4.png' import { product5 } from '../images/product-5.png' import { product6 } from '../images/product-6.png' import { product7 } from '../images/product-7.png' import { product8 } from '../images/product-8.png' // الشكل الصحيح هو import hp1 from './../images/hp-1.png' import asus1 from '../images/asus-1.png' import asus2 from '../images/asus-3.png' import dell1 from '../images/dell-1.png' import dell2 from '../images/dell-2.png' import dell3 from '../images/dell-3.png' import hp2 from '../images/hp-2.png' import hp3 from '../images/hp-3.png' import lenovo1 from '../images/lenovo-1.png' import lenovo2 from '../images/lenovo-2.png' import lenovo3 from '../images/lenovo-3.png' import toshiba1 from '../images/toshiba-1.png' import toshiba2 from '../images/toshiba-2.png' import toshiba3 from '../images/toshiba-3.png' import product1 from '../images/product-1.png' import product2 from '../images/product-2.png' import product3 from '../images/product-3.png' import product4 from '../images/product-4.png' import product5 from '../images/product-5.png' import product6 from '../images/product-6.png' import product7 from '../images/product-7.png' import product8 from '../images/product-8.png'  

ذلك لأن المسار الصحيح هو :
./to-do-img.ico.png وذلك لأن الصورة في نفس مستوى الملف index.html.

هنالك مشكلتان،
الأولى في ملف الـ app وتحديداً في الوظيفة noteClicked :
// الكود الخاص بك const noteClicked = (id) => { setCreating(false) let selectedNote = notes.find((note)=> note.id === id) setContent(selectedNote.content) setTitle(selectedNote.title) setShowNote(true) } // الكود الصحيح const noteClicked = (id) => { setCreating(false) // أو اي اسم آخر theClickedNote قم بتغير اسم المتغير إلى let theClickedNote = notes.find((note) => note.id === id) // selectedNote المسمات state قم بإضافته لل setSelectedNote(theClickedNote.id) setContent(selectedNote.content) setTitle(selectedNote.title) setShowNote(true) } حيث انك لم تكن تقوم بتعديل الـ state المسماة selectedNote في الوظيفة المسماة noteClicked.
والمشكلة الثانية في ملف الـ Notes.js وتحديداً في السطر 13 حيث انك كتبت selectedNote بدلاً من note.id كباراميتر للوظيفة noteClicked الخاصة بتغيير الـ selectedNote وهذا ما سبب ان الـ selectedNote لا تتغير.
// الكود الخاص بك noteClicked={() => noteClicked(selectedNote)} // الكود الصحيح هو noteClicked={() => noteClicked(note.id)}