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

السلام عليكم. في المشروع التالي: https://audio-player-with-react.netlify.app/ عندما أضغط على previoud btn أو next btn (في حالة الموسيقى شغالة) الموسيقى لاتعمل إلا بعد النقر على زر التشغيل. الرجاء المساعدة شكرا.

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

السلام عليكم. في الكود التالي يقع التوجة للرابط الخارجي إلا بعد النقر مرتين. لماذا. الكود: // form validation const [validate, setValidate] = useState([]) const [validMessage, setValidMessage] = useState(false) const user_regex = /^[A-Za-z]{3,10}$/; const password_regex = /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,20}$/; const email_regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; const validated = () => { return <ValidateMessage/> } const formValidation = () => { const validate = [] if (!user_regex.test(values.username)) { validate.push("Username should be 3-10 characters and shouldn't include ni special character ni numbers ni spaces!") } if (!email_regex.test(values.email)) { validate.push('Invalid email: The email should be like aaa@aa.aa') } if (!password_regex.test(values.password)) { validate.push("Password should be 8-20 characters and include at least 1 letter, 1 number and 1 special character!") } setValidate(validate) if (validate.length === 0) { setValidMessage(true) } } const handleClick = (e) => { e.preventDefault(); formValidation() if (validMessage) { setTimeout(() => window.open("https://github.com/Saadaoui-Forkan/react-forms/tree/main/responsive_form", '_self'), 1500) } } شكرا جزيلا.

السلام عليكم. في المثال التالي: عند القيام بfocus لأي عنصر تصعد label إلى الأعلى و أكتب أنا ما أريد. المشكل الذي حصل لي هو في إستخدام onBlur حيث ترجع label إلى الأسفل دائما (ما أريده هو إذا كانت input فارغة ترجع إلى الأسفل أما إذا كانت input غير فارغة تبقى label في الأعلى. قمت بالتجربة التالية const [focus, setFocus] = useState(false) const [idx, setIdx] = useState(null) const handleFocus = (id) => { setFocus(true) setIdx(id) } const handleBlur = (e) => { console.log(e.target.value) if (values.email.length !== 0) { setFocus(false) } } <FormInput key = {wrap.id} {...wrap} value = {values[wrap.name]} handleChange = {handleChange} handleFocus = {handleFocus} focus = {focus} idx = {idx} handleBlur = {handleBlur} /> ***************************************** FormInput.js ------------ <h5>{inputProps.title}</h5> <input name = {inputProps.name} type = {inputProps.type} className = "input" onChange = {handleChange} onFocus = {()=>handleFocus(inputProps.id)} onBlur = {handleBlur} /> شكرا لكم

كيف يكون ذلك. أنا قمت بالطريقة و لكن لم يتغير شيء extend: { screens: { 'xs': '480px', 'sm': '640px', 'md': '768px', 'lg': '1024px', 'xl': '1280px', '2xl': '1536px', },

السلام عليكم. في المثال التالي أريد أن يكون هناك اثنين كارد في الشاشات المتوسطة و كارد واحد في الشاشات الصغيرة الكود الجي قمت به: App <div className=" container flex gap-3 xl:gap-8 items-center justify-center "> <Card icon = {<AiFillFacebook size={30}/>} cardClass = 'card before:bg-facebook' iconClass = 'text-facebook' /> <Card icon = {<AiFillTwitterSquare size={30}/>} cardClass = 'card before:bg-twitter ' iconClass = 'text-twitter' /> <Card icon = {<AiFillInstagram size={30}/>} cardClass = 'card before:bg-gradient-to-r before:from-amber-500 before:via-orange-600 before:to-purple-600' iconClass = 'text-instagram' /> <Card icon = {<AiFillYoutube size={30}/>} cardClass = 'card before:bg-youtube' iconClass = 'text-youtube' /> </div> Card <div className={cardClass}> <div className=" flex gap-1 items-center justify-center"> <span className={iconClass}> {icon} </span> <span className="">@abcd</span> </div> <h2 className=" text-center font-bold text-5xl pt-6"> 1987 </h2> <p className=" text-center text-md uppercase tracking-[3px] text-stone-400 pb-6"> Followers </p> <div className=" flex gap-1 items-center justify-center text-mainGreen"> <span> <RiArrowUpSFill size={22}/> </span> <span>Today</span> </div> </div> index.css .card { @apply container mt-6 bg-stone-200 rounded py-6 before:content-[''] before:w-full before:h-1 relative before:absolute before:left-0 before:top-0 overflow-hidden w-1/4 md:w-1/2 sm:w-full } المشكل أنه لم يتم تفعيل md:w-1/2 sm:w-full حيث أن عدد الكارد لا يتغير في الشاشات الصغيرة و المتوسطة شكرا لكم

السلام عليكم. كيف يمكن تمرير <Icon /> داخل مكون في react js إستعملت الكود التالي <Card Icon = '<AiFillFacebook size={22}/>' /> <Card Icon = '<AiFillTwitterSquare size={22}/>' /> <Card Icon = '<AiFillInstagram size={22}/>' /> <Card Icon = "<AiFillYoutube size={22}/>" /> المتصفح لم يستطع قراءة Icon شكرا على المساعدة

السلام عليكم. هل من توضيح حول الفرق بين npm start و npm run start. و ماهو الظرف الأنسب لاستعمالهما. ( في الواقع أنا إعتدت فقط على إستعمال npm start في مشاريع react js) شكرا لكم.

السلام عليكم. أود معرفة مدى أهمية تعلم sass مع المكتبة react خاصة بعد تراجع webpack لصالحvite و في ظل ظهور مكتبات أخرى سهلة و سريعة مثل tailwind. أم أن الأمر مختلف تماما و لا يوجد أي علاقة بين preprosessor و هذه المكتبات. شكرا على التوضيح.

نعم قمت بذلك const cartProducts = cartItems.map(item => ({...item, qty:1})) const [qtyArray, setQtyArray] = useState(cartProducts)

تفضل ملفات الsrc src.zip

السلام عليكم. أود تقديم إعتذاري عن أسئلتي الكثيرة التي أنا بصدد القيام بها. لو سمحتم، عند إضافتي لعنصر محدد تظهر لي popup تحتوي كل المنتجات التي قمت بإضافتها المشكل هو عند النقر على أيقونة الحذف يقع تعديل مستوى My Cart بينما لا يقع حذفها من المنتجات الكود الذي قمت به App.js // Remove From Cart const removeFromCart = (id) => { const removed = cartItems.filter(item => item.id !== id) setCartItems(removed) } Cart.jsx const [qtyArray, setQtyArray] = useState(cartProducts) // add quantity const handlePlus = (index) => { setQtyArray(prev => prev.map((item,id) => id+1 === index ? { ...item, qty: item.qty + 1 } : item)) } // minus quantity const handleMinus = (index) => { setQtyArray(prev => prev.map((item,id) => id+1 === index ? { ...item, qty: item.qty - 1 } : item)) } // calculate total price let totalPrice = qtyArray.reduce((acc, item) => (acc + item.qty * item.price), 0) return ( <div className='cart-modal'> { qtyArray.map((cartProduct,index) => ( <CartItem key = {index} cartProduct = {cartProduct} removeFromCart = {removeFromCart} handlePlus = {handlePlus} handleMinus = {handleMinus} /> )) } <div className="cart-summary"> <h2 className='cart-summary-title'>Total ---- {totalPrice.toFixed(3)} $</h2> <button type='button' onClick={()=>setModal(false)}>CLOSE</button> </div> </div> ) } CartItemjsx console.log(cartProduct.id) return ( <div className="cart-product" > <img src={cartProduct.image} alt="" srcSet="" /> <div className="cart-product-info"> <h3 className='cart-price'>{cartProduct.price}</h3> <div className="quantity"> <button type='button' className='plus' onClick={() => handlePlus(cartProduct.id)} >+</button> <h4 className='qty'>{cartProduct.qty}</h4> <button type='button' className='minus' disabled={cartProduct.qty < 2} onClick={() => handleMinus(cartProduct.id)} >-</button> <button type='button' className='remove'> <i className="fa-solid fa-trash" onClick={()=>removeFromCart(cartProduct.id)} ></i> </button> </div> <h2 className='total'>{(cartProduct.price * cartProduct.qty).toFixed(2)} $</h2> </div> </div> ) } شكرا لكم

شكرا و لكن ماذا عن material ui هي أيضا مستخدمة بكثرة

السلام عليكم. كمبرمج، مما يسبب القلق هو إهدار الكثير من الوقت في التصميم و إختيار الألوان و الأحجام و غير ذلك، لذلك كان الحل في وجود مكتبات توفر جملة من الكلات الحاضرة التي توفر الكثير من الوقت. من بين هذه المكتبات نجد material ui و tailwind css. أود أن أسأل عن أي منها أفضل من سعة الخيارات التي توفرها كل مكتبة إضافة إلى السرعة و التجاوب مع الشاشات و مدى ملاءمتهما مع مكتبات أخرى مثل formik و paginate ... شكرا

السلام عليكم. أعتذر على كل هذه الأسئلة. نفس المشكل أخي يقع إرجاع القيمة NaN مجددا. حاولت تفهدي الأمر بوضع qtyArray عوضا عن cartItems لكن في هذه الحالة لا يقع تحديث للمبلغ الجملي عند حذف منتج الكود كاملا للإطلاع. import React, { useState } from 'react' function calculateTotal(cartItems) { let total = 0; for (let i = 0; i < cartItems.length; i++) { const price = parseInt(cartItems[i].price); const qty = cartItems[i].qty; total += price * qty; } return total; } function Cart({ cartItems, setModal, removeFromCart }) { const [qtyArray, setQtyArray] = useState( cartItems.map((cartItem) => ({ ...cartItem, qty: 1 })) ) const handlePlus = (index) => { setQtyArray((prevState) => prevState.map((item, idx) => idx === index ? { ...item, qty: item.qty + 1 } : item ) ) } const handleMinus = (index) => { setQtyArray((prevState) => prevState.map((item, idx) => idx === index ? { ...item, qty: item.qty - 1 } : item ) ) } return ( <div className='cart-modal'> {cartItems.length === 0 ? ( <h1 className='empty-cart'>Your Cart Is Empty</h1> ) : ( cartItems.map((cartItem, index) => { const qtyIndex = qtyArray.findIndex( (item) => item.id === cartItem.id ) const qty = qtyArray[qtyIndex].qty return ( <div className='cart-product' key={index}> <img src={cartItem.image} alt='' /> <div className='cart-product-info'> <h3 className='cart-price'>{cartItem.price}$</h3> <div className='quantity'> <button type='button' className='plus' onClick={() => handlePlus(qtyIndex)} > + </button> <h4 className='qty'>{qty}</h4> <button type='button' className='minus' disabled={qty <= 1} onClick={() => handleMinus(qtyIndex)} > - </button> <button type='button' className='remove'> <i className='fa-solid fa-trash' onClick={() => removeFromCart(cartItem.id)} ></i> </button> </div> <h2 className='total'>{cartItem.price * qty}</h2> </div> </div> ) }) )} <div className='cart-summary'> <h2 className='cart-summary-title'>Total: {calculateTotal(cartItems)}$</h2> <button type='button' onClick={()=>setModal(false)}>CLOSE</button> </div> </div> ) } export default Cart شكرا

شكرا لكن يبدو أنك لم تفهم ماذا أقصد بالضبط. المشكلة في كيفية التنسيق بين products و checked يعني في الأول يجب أن تظهر جميع المنتجات و التي قمت بتسميتها products ثم تطبق الفلترة و بالتالي صرت أتحدث عن checked. أنا وجدت حلا و قد عمل بشكل جيد لكن أعتقد أنه ليس best practice بسبب كثرة المتغيرات let filtered; checked.length === 0 ? filtered = products : filtered = checked لو سمحت هل ممكن أطلع على المشروع لعلني أجد ما يفيدني. شكرا.

السلام عليكم. أريد القيام بفلترة بواسطة checkbox حسب نوع منتجات قمت بجلبها بواسطة api. أولا قمت بتحديد أنواع المنتجات // Categories Array const categories = products.map(product => product.category) .reduce((acc,item) => ((acc.includes(item)) ? acc : [...acc,item]),[]) ثم قمت بتكوين مصفوفة تحتوي نوع المنتج الذي أريد إخياره const [selected, setSelected] = useState([]); const handleCheck = (e) => { const { value, checked } = e.target; if (checked === true) { setSelected((pre) => [...pre, value]); } else { setSelected((pre) => [...pre.filter((item) => item !== value)]); } } الآن تأتي عملية الفلترة let checked = products.filter(item => selected.indexOf(item.category) !== -1) المشكلة التي واجهتني هي في كيفية عرض المنتجات الدي إخترتها حيث قمت ب: if (checked.length === 0) { setProducts(products) } else { setProducts(checked) } لكن هذا الكود لايظهر شيئا. شكرا على المساعدة.

شكرا لكم لكن يوجد bug هنا حيث أنه ترجع القيمة NaN حاولت التعديل بإضافة parseInt لكن لاشيء تغير.

السلام عليكم. مثلما توضح الصورة عند النقر على + يضاف 1 و كذلك بالنسبة ل- المشكل أنه عند النقر على زر واحدة تتغير كافة العناصر الأخرى. الكود import React,{useState} from 'react' function Cart({cartItems, setModal, removeFromCart, addToCart}) { let [qty, setQty] = useState(1) return ( <div className='cart-modal'> { cartItems.length === 0 ? <h1 className='empty-cart'>Your Cart Is Empty</h1> : cartItems.map((cartItem,index) => ( <div className="cart-product" key={index}> <img src={cartItem.image} alt="" srcSet="" /> <div className="cart-product-info"> <h3 className='cart-price'>{cartItem.price}$</h3> <div className="quantity"> <button type='button' className='plus' onClick={()=>setQty(qty++)} >+</button> <h4 className='qty'>{qty}</h4> <button type='button' className='minus' disabled={cartItem.qty <= 1} onClick={()=>setQty(qty --)} >-</button> <button type='button' className='remove'> <i className="fa-solid fa-trash" onClick={()=>removeFromCart(cartItem.id)}></i> </button> </div> <h2 className='total'>{cartItem.price * qty}</h2> </div> </div> )) } <div className="cart-summary"> <h2 className='cart-summary-title'>Total: {}$</h2> <button type='button' onClick={()=>setModal(false)}>CLOSE</button> </div> </div> ) } export default Cart

السلام عليكم. عند القيام بfetch api أستعمل الطريقة التالية const [products,setProducts] = useState([]) const fetchProducts = async () => { const response = await fetch('https://fakestoreapi.com/products') const data = await response.json() setProducts(data) } useEffect(()=> { fetchProducts() }, []) عند تحديث الصفحة بعد جلب البيانات للمرة الأولى يحصل بطء كبير في تشغيل الصفحة حتى أني غالبا ما أغلق صفحة الويب و أعيد كتابة npm start. ماهو السبب لو سمحتم و شكرا

جربت كل هذه الأوار و لكن نفس المشكل

هذا ما قمت به في الواقع، حيث قمت بجلب البيانات بواسطة fetch

بعد رفع المشروع ظهرت هذه الصورة علما و أني عند إستعمال vs code كنت أفعل الأمر npm run json-server حتى أتجاوز هذا الخلل ما أقصده هو أنه لم يقع التعرف على البيانات التي قمت بجلبها من db.json.

السلام عليكم. كيف يمكنني رفع مشروع ريآكت على netlify مثلا أو github pages علما و أني قمت بتنفيذ json server "dependencies": { "@emotion/core": "^11.0.0", "@emotion/css": "^11.10.5", "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", "@reduxjs/toolkit": "^1.9.1", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "bootstrap-icons": "^1.10.3", "framer-motion": "^8.4.3", "json-server": "^0.17.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^8.0.5", "react-router-dom": "^6.6.2", "react-scripts": "5.0.1", "react-slick": "^0.29.0", "slick-carousel": "^1.8.1", "web-vitals": "^2.1.4" } شكرا

السلام عليكم. قمت بعمل المشروع التالي: https://react-find-meals.netlify.app/ الرجاء توضيح بعض الأخطاء (حسب إعتقادي بسبب useEffect hook) 1. لما أريد البحث عن طريق إسم الوجبة مثلا في البداية أكتب "pizza" يقع عرض الأكلة صحيح لكن إذا قمت بفسخها و كتابة مثلا "p" فلا شيء يحدث 2. عندما تظهر الوجبات و أريد أن أختار حسب النوع في القائمة الجانبية يظهر فقط نوع الوجبة الذي قمت بتحديده و لا تظهر بقية الأنواع. الشيفرة البرمجية: function App() { const [searchMeal, setSearchMeal] = useState("") const [meals, setMeals] = useState([]) const [showMeals, setShowMeals] = useState(false) // Fetch Meals API const getMeals = async () => { const response = await fetch('https://www.themealdb.com/api/json/v1/1/search.php?s') const data = await response.json() const findMeals = data.meals.map(meal => ( { id: meal.idMeal, title: meal.strMeal, image: meal.strMealThumb, rate: (Math.random() * 5).toFixed(2), category: meal.strCategory, description: meal.strYoutube, } )) setMeals(findMeals) } useEffect(() => { getMeals() }, []) // Display Searched Meals const getSearchedMeals = (e) => { e.preventDefault() if(searchMeal !== "") { const searched = meals.filter(meal => meal.title.toLowerCase().includes(searchMeal.toLowerCase())) setMeals(searched) } setSearchMeal("") setShowMeals(true) } // filter by category const [selected, setSelected] = useState([]) const categories = meals.map(meal => meal.category) .reduce((acc,item) => (acc.includes(item) ? acc : [...acc,item]) ,[]) const handleCheck = (e) => { const {value, checked} = e.target; if (checked === true) { setSelected(pre=>[...pre,value]) }else { setSelected(pre=> [...pre.filter(item => item !== value)]) } } useEffect(() => { const filtered = meals.filter(item => selected.includes(item.category)) setMeals(filtered); }, [selected]); // Filter By Rate return ( <div className="container"> <Search searchMeal = {searchMeal} setSearchMeal = {setSearchMeal} getSearchedMeals = {getSearchedMeals} /> <div className="main"> { showMeals && <FilterMeal categories = {categories} handleCheck = {handleCheck} /> } { showMeals && <Meals meals = {meals} searchMeal = {searchMeal} /> } </div> </div> ); } export default App; شكرا لكم.