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

السلام عليكم. في الشيفرة لماذا ترجع قيمة product إلى undefined SingleProduct import React from 'react' import { useSelector } from 'react-redux' // import { useParams } from 'react-router-dom' import './singleProduct.css' function SingleProduct() { const item = useSelector(state => state.products.SingleProduct) console.log(item) return ( <div> SingleProduct </div> ) } productSlice initialState: { singleProduct: [], }, **************************** **************************** singleProduct(state,action){ try { const singleItem = storeData.filter(item => item.id === action.payload) state.singleProduct = singleItem } catch (error) { } } ****************************** ****************************** export const { singleProduct } = productSlice.actions ملاحظة: للتوجه لهذه الصفحة يقع المرور بصفحة ProductCart هذه شيفرة ProductCart للتوضيح import React from 'react' import { useDispatch } from 'react-redux' import { Link, useParams } from 'react-router-dom' import { singleProduct } from '../../features/slices/productSlice' function ProductCard({id,img,name,text,price,color}) { const {type} = useParams() const dispatch = useDispatch() return ( <Link to={`/filteredProducts/${type}/${id}`} className = 'product-link' > <div className='product-card-container' onClick = {() => dispatch(singleProduct(id))} > <div className="prod-img"> <img src={img} alt={id}/> </div> <div className="prod-name"> <h4>{name}</h4> </div> <div className="prod-text"> <p>{text}</p> </div> <div className="prod-infos"> <h3>{price}$</h3> <div className="colors"> { color.map((item,key) => ( <div className="prod-card-color" key={key} style={{backgroundColor:`${item}`}}></div> )) } </div> </div> </div> </Link> ) } export default ProductCard شكرا لكم.

وجدت الحل. السبب هو position:absolute للصورة. و الحل هو في تحديد طول و عرض لعنصر يحتوي كامل الصور. /* الحل في إضافة هذا العنصر */ /* ----------------------- */ .slider-container { background-color: var(--color-2); width: 100vw; height: 90vh; padding: 15px auto; } /* ----------------------- */ .slider { position: relative; } .slide { width: 100vw; height: 80vh; position: absolute; }

أنا لا أريد أن تـكون NavigateButtons في أعلى الصفحة لم يتغير شيء تفضل ملفات الsrcsrc.zip شكرا. src.zip أعتذر عن وجود الكثير من الصور في غير موضعها. لم أفهم كيف حدث ذلك

في الحالات العادية يظهر المكون الأول ثم المكون الثاني (نفس العمود) (وهذا ما أريده) في هذ ا الكود .main { display: flex; flex-direction: column; } <div className='main'> <Slider/> <NavigateButtons/> </div> هذه هي النتيجة

أنا لا أريد أن يظهر المكونين على سطر واحد. وحتى عندما ب .main { display: flex; flex-direction: column; } تلخبطت الأمور و لم تظهر بالشكل الذي أريده

السلام عليكم. بقدر ما لغة بسيطة إلا أنه أحيانا أقع في مشكل كحفرة دب أعجز عن الخروج منها. في المثال التالي لم أفهم لماذا تظهر العناصر في سطر واحد. و كيف يمكن معالجة المشكل. <div className='main'> <Slider/> <NavigateButtons/> </div> شكرا

السلام عليكم. أريد إنشاء repository جديد على github. قمت باتباع التعليمات التي يقدمها github. المشكل في التعليمة الأخيرة بالنسبة لrepository لا أستطيع التعامل معها (كأنها فارغة) كيف يمكنني معالجة هذا الخطأ. شكرا.

السلام عليكم كيف يمكنني إعادة إظهار القوائم التالية في vs code شكرا

شكرا. أنا وجدت حلا و أرجو التصحيح أو التعديل إن كان غير مناسب أولا: nstalling json-server ثانيا: في ملف package.json و بالتحديد داخل ال "scripts" نضيف: "json-server": "json-server --watch data/data.json --port 5000", ثالثا: التحول إلى terminal و كتابة التعليمة التالية: npm run json-server بالطبع يسعدني جدا وجود إجابات أخرى.

السلام عليكم. في المثال التالي أردت إنشاء بيانات بواسطة json متبعا بذلك التعليمات الموجودة في التوثيق التالي https://github.com/typicode/json-server المشكل حصل لي عندما أردت إرسال البيانات إلى server. حيث قمت باصدار التعليمة التالية: json-server --watch data/data.json --port 4000 لم أفهم سبب الخطأ: Unable to load file C:\Users\saadaoui\AppData\Roaming\npm\json-server.ps1 because running scripts is disabled on this system شكرا

في هذه المرة قال لي بأن ReactDom غير معرف index.js:7 Uncaught ReferenceError: ReactDOM is not defined

الآن ظهرت رسالة الخطأ التالية: react-dom.development.js:86 Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client" حاولت التعديل بالطرق الإضافات التالية: // 👇️ For client createRoot or hydrateRoot import * as ReactDOMClient from 'react-dom/client'; // 👇️ For renderToPipeableStream or renderToReadableStream import * as ReactDOMServer from 'react-dom/server'; للأسف دون جدوى

السلام عليكم. يظهر لي الخطأ التالي في مشروع react Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17 أعتقد أنه يشير علي بتحديث نسخة react. كيف أقوم بهذا التحديث. علما و أني جربت الحلول التالية: أولا: import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <React.StrictMode> <App /> </React.StrictMode> ); ثانيا. import {StrictMode} from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( // 👈️ deprecated starting React 18 <StrictMode> <App /> </StrictMode>, document.getElementById('root'), ); كل هذه الحلول لم تجد نفعا. شكرا على المساعدة.

شكرا و لكن عندما قمت بحذف الشرط لم يتغير شيء في الfunctionality تفضل ملف الsrc src.zip

السلام عليكم في المثال التالي عندما أريد تغيير قيمة حقل معين، فقط تتغير قيمة آخر حقل مثلا لو تغيير العنصر الاول يرجع الأول كما هو و يتغير الحقل الثاني إلى القيمة التي وضعتها. لم أعرف أين يكمن المشكل. الشيفرة البرمجية: import { createSlice } from "@reduxjs/toolkit"; export const postsSlice = createSlice ({ name : 'posts', initialState : { postsArray : [], }, reducers : { addPosts : function (state,action) { state.postsArray.push(action.payload) }, deletePost : function (state,action) { state.postsArray = state.postsArray.filter(post => post.id !== action.payload) }, updatePost : function(state,action) { // console.log(state.postsArray) state.postsArray.map(p => { if (p.id === action.payload.id) { p.title = action.payload.title p.description = action.payload.description } }) } }, }) export const { addPosts,deletePost,updatePost } = postsSlice.actions; export default postsSlice.reducer; function Edit({setIsEdit,title,description,post}) { const dispatch = useDispatch() const posts = useSelector((state) => state.posts.postsArray) const [updateTitle,setUpdateTitle] = useState(title) const [updateDescription,setUpdateDescription] = useState(description) const handleUpdate = () =>{ dispatch(updatePost({id: post.id, title: updateTitle, description: updateDescription})) // console.log(posts) setIsEdit(false) } return ( <div className='edit-post'> <Container className='form'> <InputGroup className="mb-3"> <Form.Control style = {{ backgroundColor: 'transparent', color: '#fff', fontSize: '22px' }} // value={updateTitle} onChange = {(e)=>setUpdateTitle(e.target.value)} /> </InputGroup> <InputGroup className="mb-3"> <Form.Control as="textarea" // value={updateDescription} style = {{ height: '100px', backgroundColor: 'transparent', color: '#fff', fontSize: '22px' }} onChange = {(e)=>setUpdateDescription(e.target.value)} /> </InputGroup> <Button size="lg" onClick={handleUpdate} > Update </Button> </Container> </div> ) } export default Edit شكرا على المساعدة

عفوا عفوا عفوا الخطأ push يعني هذه هي العبارة الصحيحة state.postsArray.push(action.payload)

في المثال التالي لما أضغط على Add Post تظهر رسالة الخطأ على يمين الصورة الشيفرة addPosts export const postsSlice = createSlice ({ name : 'posts', initialState : { postsArray : [], }, reducers : { addPosts : function (state,action) { state.postsArray.push = action.payload; console.log(action.payload) } }, })

السلام عليكم. يظهر لي الخطأ التالي: errors.ts:49 Uncaught Error: [Immer] Immer only supports setting array indices and the 'length' property عندما قمت بفتح redux dev tools لم يظهر type لمزيد فهم المشروع سأرفع جميع الملفات src.zip شكرا على المساعدة.

هل تقصد سيتم استخدامها عند تعلم node js

قبل خوضي غمار الbackEnd بلغة الجافا سكريبت من أكاديمية حسوب أردت مشاهدة بعض الفيديوهات على اليوتيوب قصد أخذ فكرة عامة على هذا المجال و سبل التميز فيه. من هذه الفديوهات هناك من قال أن التميز في تطوير التطبيقات الخلفية يتطلب إتقان البرمجة كائنية التوجه. مامدى صحة هذا الرأي؟ شكرا لكم.

تفضل src.zip

السلام عليكم. الكود التالي يعمل بصفة جيدة const handlePrevClick = () => { let width = box.clientWidth box.scrollLeft = box.scrollLeft - width console.log(box.clientWidth); } const handleNextClick = () => { let width = box.clientWidth box.scrollLeft = box.scrollLeft + width console.log(box.clientWidth); } بينما لو حذفت console.log(box.clientWidth); تظهر لي رسالة خطأ في عدم التعرف على "clientWidth" Uncaught TypeError: Cannot read properties of undefined (reading 'clientWidth') at handleNextClick (Slider.jsx:30:1) كيف يمكنني معالجة الخطأ. شكرا.

لماذا وجب وضع الصور ي public. هل جذا الفعل يجب أن يكون دائما.

لا يظهر شيء في الكونسول. تفضل ملف الsrc src.zip

السلام عليكم. أواجه مشكل في إستعمال react slick حيث لم يظهر شيء على الشاشة و لم أستطع معرفة مكان الخطأ. الكود import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; import React from 'react' function Banner() { 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' }, ] const settings = { dots: true, lazyLoad: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1, initialSlide: 2 }; return ( <div className="banner"> <Slider {...settings} > { bannerImgs.map(banner => ( <div key={banner.id}> <img src={banner.src} alt="" /> </div> )) } </Slider> </div> ) } export default Banner شكرا لكم.