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

السلام عليكم. أجد مشكلة في حسن توظيف 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. أرجو أن أكون قد وضحت الآن و أعتذر مجددا.

نفس المشكل أخي. عند النقر على like الخاصة بمنتج محدد تصبح كافة المنتجات dislike

تفضل src.zip

السلام عليكم. عندي مشكل في تحديد العنصر الذي أريده. في المثال التالي عندما أضغط على زر like تتحول كافة العناصر إلى dislike وليس العنصر المحدد. مثلما تلاحظون كافة المنتجات dislike قمت باستعمال الدالة find و كن دون جدوى. function App() { const [toggleLike,setToggleLike] = useState(false) const handleClick = (id) => { data.find(item => item.id === id) console.log(data); setToggleLike(!toggleLike) } return ( <div className="App"> <Header/> <div className='main'> <Aside/> { <div className='products-section'> { data.map(product => ( <Product key = {product.id} id = {product.id} title = {product.title} img = {product.img} price = {product.price} handleClick = {()=>handleClick(product.id)} toggleLike = {toggleLike} /> )) } </div> } </div> </div> ); } function Product({id,img,title,price,handleClick,toggleLike}) { return ( <div className='card'> <div className='product-price'>{price} dt</div> <img src={img} className="card-img" alt=""/> <div className="card-body"> <h5 className="card-title">{title}</h5> <div className='cart-btns'> <button type="button" className="like-btn" onClick={handleClick}> { toggleLike ? <BsFillHandThumbsDownFill/> : <BsFillHandThumbsUpFill/> } </button> {/* <button type="button" className="like-btn"></button> */} <button type="button" className="add-to-cart-btn"><BsCartFill/></button> </div> </div> {/* <Rating /> */} </div> ) } شكرا على المساعدة.

نعم صحيح، المشكلة أني أحتاج إلى الدالة toggleLikeBtn قصد إضافة رقم معين عند كل عملية إعجاب gلعنصر favorites في الheader

السلام عليكم. المثال التالي، عندما أقوم بالنقر على الزر like تتحول كل الأخرى إلى dislike. CartProduct.js code import React,{useState} from 'react' function CartProduct({id,price,src,title,detail,toggleLikeBtn,isLike}) { return ( <div className="card"> <div className='product-price'>{price} DT</div> <img src={src} className="card-img-top" alt="..."/> <div className="card-body"> <h5 className="card-title">{title}</h5> <p className="card-text">{detail}</p> <div className='cart-btns'> <div className='toggle-like'> <button type="button" className="btn btn-outline-danger" onClick={toggleLikeBtn}> {isLike ? "Dislike" : "Like"} </button> </div> <button type="button" className="btn btn-outline-primary">Add To Cart</button> </div> <div className='rating'> <i className="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i> </div> </div> </div> ) } export default CartProduct CartProducts.js code import React,{useState} from 'react' import data from '../data' import './CartProducts.css' import CartProduct from './CartProduct' function CartProducts() { const [isLike,setIsLike] = useState(false) const toggleLikeBtn = () =>{ setIsLike(!isLike) } return ( <div className='cart-products-container'> { data.map(product => ( <CartProduct key={product.id} id={product.id} src={product.img} price={product.price} title={product.title} detail={product.des} toggleLikeBtn={toggleLikeBtn} isLike={isLike} /> )) } </div> ) } export default CartProducts شكرا على المساعدة

أنا أردت تغيير هذه navbar صحيح مثل الصورة التي أرفقتها و لكن Logo على اليسار search في الوسط و buttons على اليمين

السلام عليكم. في الكود التالي قمت بإنشاء navnar بواسطة bootstrap. <nav className="navbar navbar-expand-lg navbar-light"> <div className="container-fluid"> <h4 className="Logo">Logo</h4> <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span className="navbar-toggler-icon"></span> </button> <div className="collapse navbar-collapse" id="navbarSupportedContent"> <ul className="navbar-nav me-auto mb-2 mb-lg-0"> <li className="nav-item"> <button type="button" className="btn btn-primary">My Favorites <span>0</span></button> </li> <li className="nav-item"> <button type="button" className="btn btn-primary">My Cart <span>0</span></button> </li> </ul> <form className="d-flex"> <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" /> <button className="btn btn-outline-primary" type="submit">Search</button> </form> </div> </div> </nav> النتيجة كانت كالتالي: قمت بإضافة الخاصية " d-flex justify-content-between" قصد التفريق بين العناصر لكن بدون جدوى. (ما أريده هو أن تكون Logo على اليسار search في الوسط و buttons على اليمين) شكرا لكم.

متى نستمل المعقفات و متى لا. شكرا جزيلا

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

ظهرت رسالة الخطأ التالية ERROR in ./src/components/data.js 27:7-10 Can't import the named export 'hp1' (imported as 'hp1') from default-exporting module (only default export is available)

السلام عليكم الفايل التالي يمثل جملة من البيانات الخاصة ببعض المنتجات التي سأقوم بجلبها لاحقا 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' let data = [ { id:1, img: hp1, title:'Hp one', des:'screen 15.6" FHD - processor Intel i7-1065G7', price: 900, category:'HP', rate:4 }, { id: 2, title: "Google Pixel - Black", img: product1, price: 810, category: "GOOGLE1", des: "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub, echo park actually green juice sriracha paleo. Brooklyn sriracha semiotics, DIY coloring book mixtape craft beer sartorial hella blue bottle. Tote bag wolf authentic try-hard put a bird on it mumblecore. Unicorn lumbersexual master cleanse blog hella VHS, vaporware sartorial church-key cardigan single-origin coffee lo-fi organic asymmetrical. Taxidermy semiotics celiac stumptown scenester normcore, ethical helvetica photo booth gentrify.", rate: 4.25 }, { id: 3, title: "Samsung S7", img: product2, price: 1699, company: "SAMSUNG", des:"Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub, echo park actually green juice sriracha paleo. Brooklyn sriracha semiotics, DIY coloring book mixtape craft beer sartorial hella blue bottle. Tote bag wolf authentic try-hard put a bird on it mumblecore. Unicorn lumbersexual master cleanse blog hella VHS, vaporware sartorial church-key cardigan single-origin coffee lo-fi organic asymmetrical. Taxidermy semiotics celiac stumptown scenester normcore, ethical helvetica photo booth gentrify.", total: 4.80 }, { id: 4, img: dell1, title: 'Dell one', des: 'screen 15.6" FHD - processor Intel i7-1165G7', price: 899, category: 'DELL', rate: 3.10 }, { id: 5, img: dell2, title: dell2, des: 'screen 15.6" FHD - processor Intel i7-1065G7 ', price: '800', category: 'DELL', rate: 4.75 }, { id: 6, img: dell3, title: 'Dell three', des: 'screen 15.6" FHD - processor Intel i7-1065G7', price: 1699, category:'DELL', rate:4.55 }, { id: 7, img: asus1, title: 'Asus one', des: 'screen 15.6" FHD - processor Intel i7-1065G7', price: 700, category: 'ASUS', rate: 4.5 }, { id: 8, title: "HTC 10 - White", img: product3, price: 1080, category: "htc", des: "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub, echo park actually green juice sriracha paleo. Brooklyn sriracha semiotics, DIY coloring book mixtape craft beer sartorial hella blue bottle. Tote bag wolf authentic try-hard put a bird on it mumblecore. Unicorn lumbersexual master cleanse blog hella VHS, vaporware sartorial church-key cardigan single-origin coffee lo-fi organic asymmetrical. Taxidermy semiotics celiac stumptown scenester normcore, ethical helvetica photo booth gentrify.", rate: 3.84 }, { id: 9, title: "HTC Desire 626s", img: product4, price: 1024, category: "htc", des:"Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub, echo park actually green juice sriracha paleo. Brooklyn sriracha semiotics, DIY coloring book mixtape craft beer sartorial hella blue bottle. Tote bag wolf authentic try-hard put a bird on it mumblecore. Unicorn lumbersexual master cleanse blog hella VHS, vaporware sartorial church-key cardigan single-origin coffee lo-fi organic asymmetrical. Taxidermy semiotics celiac stumptown scenester normcore, ethical helvetica photo booth gentrify.", rate: 3.98 }, { id: 10, img:asus2, title:'Asus two', des:'screen 15.6" FHD - processor Intel i7-1065G7', price:979, category:'ASUS', rate:3.75 }, { id:11, img:hp2, title:'Hp two', des:'screen 15.6" FHD - processor Intel i7-1065G7', price:699, category:'HP', rate:4.42 }, { id: 12, title: "HTC 10 - Black", img: product5, price: 899, company: "htc", des: "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub.", rate: 4.10 }, { id: 13, img: hp3, title: 'Hp three', des: 'screen 15.6" FHD - processor Intel i7-1065G7', price: 1245, category:'HP', rate:4.35 }, { id: 14, img:lenovo1, title:'Lenovo one', des:'screen 15.6" FHD - processor Intel i7-1065G7', price: 999, category:'LENOVO', rate:4.15 }, { id: 15, img: lenovo2, title: 'Lenovo two', des: 'screen 15.6" FHD - processor Intel i7-1065G7', price: 987, category:'LENOVO', rate:3.92 }, { id: 16, title: "Vintage Iphone", img: product6, price: 1017, company: "apple", des: "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub.", rate: 2.88 }, { id: 17, title: "Iphone 7", img: product7, price: 30, company: "apple", des: "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub.", rate: 3.99 }, { id: 18, img:lenovo3, title:'lenovo three', des:'screen 15.6" FHD - processor Intel i7-1065G7', price: 815, category:'LENOVO', rate:3.10 }, { id:19, img: toshiba1, title:'Toshiba one', des:'screen 15.6" FHD - processor Intel i7-1065G7', price: 1005, category:'TOSHIBA', rate:4.82 }, { id:20, img: toshiba2, title:'Toshiba two', des:'screen 15.6" FHD - processor Intel i7-1065G7', price: 989, category:'TOSHIBA', rate:4.21 }, { id: 21, img: toshiba3, title:'Toshiba three', des:'screen 15.6" FHD - processor Intel i7-1065G7', price: 1299, category:'TOSHIBA', rate:3.75 }, { id: 22, title: "Smashed Iphone", img: product8, price: 1229, company: "apple", des: "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub.", rate: 4.5 } ] export default data في السطر الأول مثلا المتغير hp1 يمثل رابط الصورة للمنتج. عندما أقوم بجلب الصورة في ملف آخر بالطريقة التالية import {data} from '../data' function Header() { return ( <img src={data[0].img} className="card-img-top" alt="..."/> ) } export default Header تظهر رسالة الخطأ التالية ERROR in ./src/components/Header/Header.js 31:13-24 export 'data' (imported as 'data') was not found in '../data' (possible exports: default) ERROR in ./src/components/data.js 36:7-15 Can't import the named export 'product1' (imported as 'product1') from default-exporting module (only default export is available) ERROR in ./src/components/data.js 44:7-15 Can't import the named export 'product2' (imported as 'product2') from default-exporting module (only default export is available)

السلام عليكم. في bootstrap : تكون toggle-icon في svg. كيف يمكنني تغيير هذه svg. شكرا.

أنا أستعمل chrome.

قمت بوضع التاج التالية في index.html في مشروعي بلغة react js <meta name="theme-color" content="#573d7d" /> لم يتغير لون القائمة العلوية. شكرا.

لا شيء أخي

السلام عليكم. أريد تغيير favIcon في مشروع react js. index.html <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" type="image/x-icon" href="../src/images/to-do-icon.png"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Dosis:wght@400;800&display=swap" rel="stylesheet"> <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> --> <title>My To Do</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body> </html> توضيح مسار الصورة شكرا على المساعدة

وجدت الحل بالطريقة التالية import React, {useState} from 'react' import Notes from './Notes/Notes'; import './App.css'; import AddNoteForm from './AddNoteForm/AddNoteForm'; import NoteContainer from './NoteContainer/NoteContainer'; function App() { const [notes,setNotes] = useState([]) const [title,setTitle] = useState('') const [content,setContent] = useState('') const [selectedNote,setSelectedNote] = useState(null) const [error,setError] = useState(false) const [creating,setCreating] = useState(false) const [showNote,setShowNote] = useState(false) const [editing,setEditing] = useState(true) const handleChange_title = (e) => { setTitle(e.target.value) } const handleChange_content = (e) => { setContent(e.target.value) } const saveNoteHandler = (e) =>{ e.preventDefault() if (title.length === 0 || content.length === 0) { setError(true) } else{ setError(false) const note = { id : new Date(), title : title, content : content } const updatedNotes = [...notes,note] setNotes(updatedNotes) setSelectedNote(note.id) } setTitle('') setContent('') } const handleAddNote = () => { setCreating(true) setTitle('') setContent('') } const noteClicked = (id) => { setCreating(false) let theClickedNote = notes.find((note)=> note.id === id) setContent(theClickedNote.content) setTitle(theClickedNote.title) setSelectedNote(theClickedNote.id) setShowNote(true) } const deleteNoteHandler = (selectedNote) =>{ const updatedNotes = [...notes] const findIndex = updatedNotes.findIndex(note => note.id === selectedNote ) updatedNotes.splice(findIndex,1) setSelectedNote(null) setNotes(updatedNotes) setShowNote(false) } const updateNoteHandler = (selectedNote) =>{ setCreating(true) setEditing(false) const updatedNotes = [...notes] const noteIndex = notes.findIndex(note => note.id === selectedNote) updatedNotes[noteIndex] = { id: selectedNote, title: title, content: content } setNotes(updatedNotes) } const editNoteHandler = (e) => { e.preventDefault() const updatedNotes = [...notes] const noteIndex = notes.findIndex(note => note.id === selectedNote) // setTitle(updatedNotes[noteIndex].title) updatedNotes[noteIndex] = { id: selectedNote, title: title, content: content } setNotes(updatedNotes) setEditing(true) setTitle('') setContent('') // setCreating(false) // setShowNote(false) } return ( <div className='app'> <Notes className='notes' notes={notes} handleAddNote={handleAddNote} noteClicked={noteClicked} /> { !creating ? <NoteContainer className='' title = {title} content = {content} showNote = {showNote} deleteNoteHandler = {deleteNoteHandler} updateNoteHandler={updateNoteHandler} selectedNote = {selectedNote} /> : <AddNoteForm className='add-note-form' saveNoteHandler={saveNoteHandler} handleChangeContent={handleChange_content} handleChangeTitle={handleChange_title} error={error} title={title} content={content} editing = {editing} editNoteHandler = {editNoteHandler} selectedNote = {selectedNote} /> } </div> ); } export default App; شكرا على المساعدة