محمود سعداوي2

السلام عليكم. في الكود التالي لدي مشكل في إستعمال link حيث أنه عند على الرابط المحدد لا يقع توجيهي إلى الصفحة المحددة. الكود: <ul className={toggleLinks}> <Link to="/" onClick={handleToggle} className='navLink'>Home</Link> <Link to="/authors" onClick={handleToggle} className='navLink'>Authors</Link> <Link to="/about" onClick={handleToggle} className='navLink'>About Us</Link> <Link to="/contact" onClick={handleToggle} className='navLink'>Contact Us</Link> <Link to="/register" onClick={handleToggle} className='navLink'>Register</Link> </ul> أعتقد أن سبب المشكل هو الevent onClick. الكود كاملا: import React,{useState}from 'react' import {Link} from 'react-router-dom' import Logo from '../../images/Logo.png' import './Header.css' function Header() { const [activeInput,setActiveInput] = useState('inputSearch') const handleActiveInput = (e) =>{ e.preventDefault() activeInput === 'inputSearch' ? setActiveInput('inputSearch active-input-search') : setActiveInput('inputSearch') } const [toggle,setToggle] = useState('toggle-button') const [toggleLinks,setToggleLinks] = useState('navbar-links') const handleToggle = (e) =>{ e.preventDefault() toggle === 'toggle-button' ? setToggle('toggle-button toggle-bars') : setToggle('toggle-button') toggleLinks === 'navbar-links' ? setToggleLinks('navbar-links active-navbar') : setToggleLinks('navbar-links') } return ( <div className='header'> <nav className="navbar"> <div className="brand-title"> <img src={Logo} alt="" className="logo" /> </div> <ul className={toggleLinks}> <Link to="/" onClick={handleToggle} className='navLink'>Home</Link> <Link to="/authors" onClick={handleToggle} className='navLink'>Authors</Link> <Link to="/about" onClick={handleToggle} className='navLink'>About Us</Link> <Link to="/contact" onClick={handleToggle} className='navLink'>Contact Us</Link> <Link to="/register" onClick={handleToggle} className='navLink'>Register</Link> </ul> </nav> <div className="header-left"> <form className="search"> <input type="text" className={activeInput} placeholder='Search in book store...'/> <button type='button' onClick={handleActiveInput}> <i className="bi bi-search"></i> </button> </form> <div className="add-to-cart"> <i className = "bi bi-cart-fill"></i> </div> </div> <div className={toggle} onClick={handleToggle}> <div className="bar"></div> <div className="bar"></div> <div className="bar"></div> </div> </div> ) } export default Header كيف يمكنني تجاوز هذا الخطأ. شكرا.

السلام عليكم. هل من الضروري تعلم firebase أم أنه بالإنتقال إلى مرحلة backend يقع الإستغناء عنها.

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

السلام عليكم. كيف أصوت لفائدة جواب معين و ما فائدة ذلك

عفوا أخي لقد قمت بالتعديل التالي في SideBarMenu const subCategoryProducts = (item) =>{ let subCategory = item.target.innerText.toUpperCase() let subCategoryArray = data.filter(prod=> prod.category.toUpperCase() === subCategory) setSubProducts([...subProducts,subCategoryArray]) } أجدد إعتذاري شكرا. لا أعرف dynamic routes. هل يوجد مقال توضيحي لو سمحت

تفضل package.zippackage-lock.zippublic.zipsrc.zip

السلام عليكم. قمت بإنشاء رابط بواسطته أتمكن من التنقل من صفحة homePage إلى صفحة subCategoryPage وذلك باعتماد الدالة subCategoryProducts. const subCategoryProducts = (item) =>{ let subCategory = item.target.innerText.toUpperCase() let subCategoryArray = data.filter(prod=> prod.category.toUpperCase() === subCategory) console.log(subCategoryArray); } حتى أتمكن من تمرير البيانات قمت بالإعتماد على الهوكس const [subProducts,setSubProducts] = useState([]) وبالتالي صارت الدالة subCategoryProducts const subCategoryProducts = (item) =>{ let subCategory = item.target.innerText.toUpperCase() let subCategoryArray = data.filter(prod=> prod.category.toUpperCase() === subCategory) // console.log(subCategoryArray); setSubProducts([...subProducts,subCategoryArray]) } المشكل هنا لم يقع التعرف بتاتا على subProducts. حيث أنني عندما قمت ب: console.log(subProducts); لم يظهر شيئا في الكونسل. شكرا لكم.

تفضل بقية الملفات package.zip public.zip package-lock.zip

تفضل src.zip

السلام عليكم. في الصورة التالية: كل كارد في categories هو بمثابت رابط يعطيني المنتجات الخاصة بكل صنف. عند النقر صنف معين تظهر صفحة المنتجات من وسطها وليس من أولها. لمعالجة هذا المشكل قمت بوضع الشيفرة التالية في صفحة المنتجات: window.scroll(0.0) المشكل الذي حصل هنا هو أن صفحة HomePage إختفت تماما. شكرا لكم.

تفضل src.zip

شكرا أخي هناك مشكل بسيط هو أن تفعيل الفلترة بواسطة تقييم النجوم يحدث بعد النقر من المرة الثانية

عندما أضغط على النجمة الثالثة مثلا لا تظهر المنتجات التي تقييمها يكون ثلاث نجمات

السلام عليكم. أريد القيام بفلترة حسب التقييم (تقييم المنتج في شكل star rating) الكود الذي قمت به: import '../styles/App.css'; import Header from './Header' import Aside from './Aside' import Product from './Product' import data from './data' import {useState} from 'react' function App() { const [checked, setChecked] = useState([]) const [numLikes, setNumLikes] = useState(0) // define products categories const categories = data.reduce( (acc, elem) => acc.includes(elem.category) ? acc : acc.concat(elem.category), [] ) const handleCheck = (event) => { if (checked.includes(event.target.value)) { let updated = checked.filter(item => item !== event.target.value) setChecked(updated) } else { let updated = [...checked, event.target.value] setChecked(updated) } } // add To Favorites 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') } } // filter by rating const [currentValue, setCurrentValue] = useState(0); const handleRateClick = value => { setCurrentValue(value) filterByRating() } const filterByRating = () =>{ // console.log(currentValue); let filtered = data.filter(prod => Math.round(prod.rate) === currentValue) setChecked(filtered) console.log(filtered); } return ( <div className="App"> <Header numLikes = {numLikes} /> <div className='main'> <Aside categories = { categories } handleCheck = {handleCheck} handleRateClick = {handleRateClick} currentValue = {currentValue} /> { <div className='products-section'> { data.map(product => checked.length === 0 ? ( <Product key = {product.id} id = {product.id} title = {product.title} img = {product.img} price = {product.price} rating = {product.rate} handleLike = {handleLike} /> ) : checked.includes(product.category) ? ( <Product key = {product.id} id = {product.id} title = {product.title} img = {product.img} price = {product.price} rating = {product.rate} /> ) : [] ) } </div> } </div> </div> ); } export default App; شكرا على المساعدة.

تفضل src (2).zip

السلام عليكم. في الصورة التالة لدي منتج به زر إعجاب يتغير لونه عند النقر عليه مثلما تلاحظون في أعلى الصورة يوجد عنصر My Favorites هذا العنصر يحدد عدد الإعجابات الجملية أو بالأحرى يحسب عدد الأزرار التي باللون الأحمر. مثال: في الصورة الثانية عدد الإعجابات 01 بينما إذا أعدت النقر على الزر باللون الأحمر يتحول لونه إلى اللون الأولي و بالتالي يصبح عدد الإعجابات 00. الكود الذي قمت به: const handleLike = (el) =>{ el.target.classList.toggle('toggle-like-btn-icon') if(el.target.style.color === "#F05454"){ setNumLikes(numLikes + 1) console.log('true'); }else{ setNumLikes(numLikes - 1) } } المشكل أنه مهما كان النقر دائما My Favorites تزيد بعدد 01 شكرا على المساعدة.

السلام عليكم. أريد إنشاء موقع Ecommerce بلغة react js مثل amazon او jumia أو decathlon. كيف يمكنني الحصول بيانات تتعلق بالمنتجات مثل إسم المنتج و صوره و تعريفه و متوسط التقييم لكل منتج و أصناف النتجات إلخ... حتى يكون هذا الموقع قريب نوعا ما من الحقيقة.

السلام عليكم. أجد مشكلة في حسن توظيف react hooks. في المثال التالي عند النقر على زر معين أريد تغيير الكلاس فقط للزر الذي وقع النقر عليه. ( أنا عندما أنقر على الزر يتغير الكلاس الخاص بكل العناصر) الكود: import React,{useState} from 'react' import'../../assets/css/custom.css' function SideBarMenu() { let accordionMenuDivInside = [ { id : 1, img_src : "test.png", content : "Living Room", ul : { li_1 : "Sofa", li_2 : "Beds", li_3 : "Tv Units", } }, { id : 2, img_src : "test.png", content : "Living Room", ul : { li_1 : "Sofa", li_2 : "Beds", li_3 : "Tv Units", } }, { id : 3, img_src : "test.png", content : "Living Room", ul : { li_1 : "Sofa", li_2 : "Beds", li_3 : "Tv Units", } }, { id : 4, img_src : "test.png", content : "Living Room", ul : { li_1 : "Sofa", li_2 : "Beds", li_3 : "Tv Units", } }, { id : 5, img_src : "test.png", content : "Living Room", ul : { li_1 : "Sofa", li_2 : "Beds", li_3 : "Tv Units", } }, ] const [active , setActive] = useState('accordion') const handleClick = () =>{ active === 'accordion' ? setActive('accordion active') : setActive('accordion') } return ( <div className="accordionMenuDiv"> <div className="accordionMenuDivInside"> { accordionMenuDivInside.map(item => { return ( <React.Fragment key={item.id}> <button className={active} onClick={handleClick}> <img className="accordionMenuIcon" alt='' src={item.img_src} /> {item.content} </button> <div className="panel"> <ul> <li><a href="/#" className="accordionItem" > {item.ul.li_1}</a></li> <li><a href="/#" className="accordionItem" > {item.ul.li_2}</a></li> <li><a href="/#" className="accordionItem" > {item.ul.li_3} </a></li> </ul> </div> </React.Fragment> ) }) } </div> </div> ) } export default SideBarMenu شكرا.

تفضل ملف src src.zip

عفوا أخي حصل خطأ ما و أنا بصدد إعادة السؤال مثلما تلاحظون تظهر كافة العناصر في البداية ثم عند إختيار category معين (the category is checked) تظهر المنتجات الخاصة بتلك category. ما أريده هو عند إعادة النقر على category معين (يعني تصبح the category is not checked) تختفي المنتجات التي تخص تلك category. حاولت بالطريقة التالية: import '../styles/App.css'; import Header from './Header' import Aside from './Aside' import Product from './Product' import data from './data' import {useState} from 'react' function App() { const [checked, setChecked] = useState([]) const [isChecked, setIsChecked] = useState(true) // define products categories const categories = data.reduce( (acc, elem) => acc.includes(elem.category) ? acc : acc.concat(elem.category), [] ) const handleCheck = (event) => { // let updated = [...checked,event.target.value] // setChecked(updated) if (isChecked) { let updated = [...checked,event.target.value] setChecked(updated) } setIsChecked(!isChecked) } return ( <div className="App"> <Header // likesNumber = {likesNumber} /> <div className='main'> <Aside categories = { categories } handleCheck = {handleCheck} /> { <div className='products-section'> { data.map(product => checked.length === 0 ? ( <Product key = {product.id} id = {product.id} title = {product.title} img = {product.img} price = {product.price} /> ) : checked.includes(product.category) ? ( <Product key = {product.id} id = {product.id} title = {product.title} img = {product.img} price = {product.price} /> ) : [] ) } </div> } </div> </div> ); } export default App; شكرا للمساعدة.

السلام عليكم. توصلت إلى القيام بفلترة بواسطة checkbox.

السلام عليكم. قمت بعمل مشروع react أردت فيه تطبيق filter by checkbox. في البداية أنشأت الدالة handleCheck التي بواسطتها أستطيع التعرف على العناصر التي أريد إضافتها. ثم قمت بإنشاء الفرضية التي بها أحدد العناصر الظاهرة على الصفحة. الكود التالي سوف يوضح أكثر. import '../styles/App.css'; import Header from './Header' import Aside from './Aside' import Product from './Product' import data from './data' import {useState} from 'react' function App() { const [checked, setChecked] = useState([]) // define products categories const categories = data.reduce( (acc, elem) => acc.includes(elem.category) ? acc : acc.concat(elem.category), [] ) const handleCheck = (event) => { let updated = [...checked,event.target.value] setChecked(updated) console.log(updated.includes(data[0].category)); } return ( <div className="App"> <Header // likesNumber = {likesNumber} /> <div className='main'> <Aside categories = { categories } handleCheck = {handleCheck} /> { <div className='products-section'> { data.map(product => checked.includes(product.category) ? ( <Product key = {product.id} id = {product.id} title = {product.title} img = {product.img} price = {product.price} /> ) : [] ) } </div> } </div> </div> ); } export default App; الكود يعمل بشكل جيد ووقع تطبيق الفلترة. المشكل هو عند تحديث الصفحة لايظهر أي منتج بسبب المصفوفة الفارغة. السؤال: كيف يمكنني إظهار كافة النمتجات في البداية و من ثم القيام بالفلترة. شكرا على المساعدة.

السلام عليكم. أريد تكوين مصفوفة تحتوي كل عنصر قمت بالنقر عليه. المشكل هو ظور مصفوفة فارغة عند أول نقر. const [productFav,setProductFav] = useState([]) const handleLike = (id) => { const likedProduct = data.find(item => item.id === id) setProductFav([...productFav,likedProduct]) console.log(productFav); } شكرا على المساعدة.

شكرا لك أخي و لكن أعتقد أنك لم تفهمني. أولا: المشكلة الأولى تظهر عند النقر على زر الإعجاب. setSelectedProduct(findProd.id) قامت بتحديد العنصر الذي أنا بصدد النقر عليه. إذن المشكل في setToggleLike(!toggleLike) حيث أنها تقوم بتغيير كافة الأزرار. المشكل الآخر هو أني لا أريد تغيير state حيث أنني أحتاج الدالة handleClick قصد استعمالها كprops للمكون Header. أرجو أن أكون قد وضحت الآن و أعتذر مجددا.