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

السلام عليكم. أود معرفة مدى أهمية تعلم 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; شكرا لكم.

شكرا لكن ظهر مشكل آخر عند إختيار عنصر من عناصر الفلترة تختفي بقية العناصر

السلام عليكم في المشروع التالي: قمت بالبحث عن المأكولات عبر كتابة الإسم المناسب. ثم أردت فلترة هذه المأكولات بواسطة checkbox قمت بكتابة الكود التالي 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)]) } } const filtered = meals.filter(item => selected.includes(item.category)) console.log(filtered) في هذه الحالة تمكنت من التعرف على filtered و ظهرت في الكونسول دون مشكل. ثم قمت ب: const filtered = meals.filter(item => selected.includes(item.category)) setMeals(filtered); هنا ظهرت رسالة الخطأ التالية ملاحظة: قمت بجلب البيانات بواسطة الكود التالي // 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() }, []) شكرا على المساعدة

السلام عليكم. في المكود التالي: const [dummyTransactions,setDummyTransactions] = useState([]) const [validate,setValidate] = useState(false) const [errorText,setErrorText] = useState("") const [errorAmount,setErrorAmount] = useState("") const addNewTransaction = () => { if (text.length === 0 && amount.length === 0) { setErrorText("Please Enter A text") setErrorAmount("Please enter An Amount") setValidate(true) } else if(amount.length === 0 && text.length !== 0 ) { setErrorAmount("Please enter An Amount") setValidate(true) } else if(text.length === 0 && amount.length !== 0) { setErrorText("Please Enter A text") setValidate(true) } else { setDummyTransactions([...dummyTransactions,{id: new Date(), text: text, amount: +amount}]) setAmount('') setText('') setValidate(false) } } الكود يعمل بشكل جيد من المرة الأولى و رسالة الخطأ تظهر بالطريقة المناسبة. المشكل هو أني إذا تطابقت البيانات في الأول ثم نسيت مثلا المبلغ و كتبت النص فإن رسالة الخطأ تظهر أنه علي كتابة النص و المبلغ شكرا على المساعدة

شكرا جزيلا أستاذ عمر

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

في هذه الحالة يرجع NaN بالنسبة للثروة أما في هذه فالصفحة ترجع فارغة و لايظهر أي خطأ في الكونسول هنا الصفحة لا تتغير و اليحدث ترتيب في هذه الحالة يظهر الخطأ التالي: App.js:23 Uncaught TypeError: number.toFixed is not a function at formatMoney (App.js:23:1) at calculateWealth (App.js:60:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) at invokeGuardedCallback (react-dom.development.js:4277:1) at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1) at executeDispatch (react-dom.development.js:9041:1) at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1) at processDispatchQueue (react-dom.development.js:9086:1) at dispatchEventsForPlugins (react-dom.development.js:9097:1)

السلام عليكم. في المثال التالي: عند النقر على Add User تمكنت من إضافة يوزر آخر . بقية الأزرار الهدف منها هو تطبيق دوال مثلما تشير مسمياتها. المشكل أنه لم يظهر لي أي شء إذ لم يقع أي تغيير عند النقر على الأزرار كما أن console لم يظهر لي أي خطأ علما أني جربت الأكواد التالية let [data, setData] = useState([]); async function fetchRandomUsers() { const response = await fetch('https://randomuser.me/api') const responseData = await response.json() const newUser = { user: `${responseData.results[0].name.first} ${responseData.results[0].name.first}`, money: formatMoney(Math.floor(Math.random() * 1000000)) } setData([...data, newUser]); } useEffect(() => { fetchRandomUsers() }, []); // Format number as money function formatMoney(number) { return '$' + number.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'); } // Add User const handleAdd = () => { let addUser = []; let new_user = fetchRandomUsers(); addUser.push(new_user) } // Double Money const doubleMoney = () => { data = data.map(user => { return {...user, money:user.money * 2} }) } // Show Millionaires function showMillionaires(){ // console.log('showMillionaires') data = data.filter(item => item.money > 500000) }

صحيح في الأول ظهرت 4 مستخدمين لكن بعد تحديث الصفحة رجع يوزر واحد أردت إحضار مستخدم أو إثنين على الأكثر لأني أريد تطبيق بعض الدوال كإضافة مستخدم جديد