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

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

<input className='input-btn input' type='submit' value='Edit' onClick = {editNoteHandler} />

السلام عليكم في المثال التالي أريد تعديل الملاحظة و حفضها على الجهة اليسرى عند النقر على Edit يقع تحديث الصفحة و العودة إلى صفحة البداية. جربت () preventDefault ولكن دون جدوى. الشيفرة: 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) console.log(updatedNotes[noteIndex]) } const editNoteHandler = (selectedNote) => { const updatedNotes = [...notes] const noteIndex = notes.findIndex(note => note.id === selectedNote) updatedNotes[noteIndex] = { id: selectedNote, title: title, content: content } console.log('===================================='); console.log( updatedNotes[noteIndex].title); console.log('===================================='); } 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;

تفضل src.zip

السلام عليكم. عند النقر على selectedNote يقع إرجاع العنصر الأخير من المصفوفة. شيفرة NoteContainerAdded import React from 'react' import './NoteContainer.css' function NoteContainerAdded({title,content,deleteNoteHandler,selectedNote}) { return ( <div className='note-container'> <h2 className='title-added'>{title}</h2> <p className='content-added'>{content}</p> <div className='btns'> <button className='delete' onClick={()=>deleteNoteHandler(selectedNote)}>Delete</button> <button className='edit'>Edit</button> </div> </div> ) } شيفرة NoteContainer import React,{} from 'react' import './NoteContainer.css' import NoteContainerStart from './NoteContainerStart' import NoteContainerAdded from './NoteContainerAdded' function NoteContainer({title,content,showNote,deleteNoteHandler,selectedNote}) { return ( <> { !showNote ? <NoteContainerStart> <h2>Welcome To My ToDo</h2> <p>Please click on the button below to enter your first todo</p> </NoteContainerStart> : <NoteContainerAdded title={title} content={content} deleteNoteHandler={deleteNoteHandler} selectedNote = {selectedNote} /> } </> ) } export default NoteContainer; شيفرة App 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 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 selectedNote = notes.find((note)=> note.id === id) setContent(selectedNote.content) setTitle(selectedNote.title) setShowNote(true) } const deleteNoteHandler = (selectedNote) =>{ const updatedNotes = [...notes] const findIndex = updatedNotes.findIndex(note => note.id === selectedNote ) console.log('===================================='); console.log(updatedNotes,"index: ",findIndex) } return ( <div className='app'> <Notes className='notes' notes={notes} handleAddNote={handleAddNote} noteClicked={noteClicked} /> { !creating ? <NoteContainer className='' title = {title} content = {content} showNote = {showNote} deleteNoteHandler = {deleteNoteHandler} selectedNote = {selectedNote} /> : <AddNoteForm className='add-note-form' saveNoteHandler={saveNoteHandler} handleChangeContent={handleChange_content} handleChangeTitle={handleChange_title} error={error} title={title} content={content} /> } </div> ); } export default App; أعتذر. في السطر الأول أقصد delete مكان selectedNote شكرا

شكرا

هل يمكن استعمال filter.

قمت بدالة أريد من خلالها إرجاع عنصر محدد (الذي قمت بالضغط عليه) المشكل أن النتيجة تكون دائما أول عنصر من المصفوفة const noteClicked = () => { setCreating(false) let selectedNote = notes.find((note,i)=> note.id === notes[i].id) console.log(selectedNote) } شكرا جزيلا.

في المثال التالي عند النقر العنصر المحدد لا تتغير className الكود import React,{} from 'react' function Note({title,noteClicked,active}) { return ( <h2 className={`note ${active && "active"} `} onClick={noteClicked}> {title} </h2> ) } export default Note بالرغم أن كل شيء تمام في console Notes.js function Notes({notes}) { const noteClicked = (e) => { console.log('===================================='); console.log(e.currentTarget.classList); console.log('===================================='); } return ( <div className='notes'> { notes?.map(note => <Note key={note.id} title={note.title} content={note.content} noteClicked={noteClicked} /> ) } <button className='add-btn'>+</button> </div> ) } export default Notes صورة الشاشة