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

<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 صورة الشاشة

قمت باستخدام Notes في App.js import React, {} from 'react' import Notes from './Notes/Notes'; import './App.css'; import AddNoteForm from './AddNoteForm/AddNoteForm'; function App() { return ( <div className='app'> <Notes className='notes'/> <AddNoteForm className='add-note-form'/> </div> ); }

لا يمكنني تمرير مصفوفة فارغة import React , {useState} from 'react' import './AddNoteForm.css'; import Alert from '../Alert/Alert' import Notes from '../Notes/Notes' function AddNoteForm() { const [title,setTitle] = useState('') const [content,setContent] = useState('') const [error,setError] = useState(false) const [notes,setNotes] = useState([]) 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) } } return ( <form> <input className='title-content input' type='text' placeholder='title' value={title} onChange={handleChange_title} /> <textarea className='note-content input' type='text' placeholder='text' rows='8' value={content} onChange={handleChange_content} /> <input className='input-btn input' type='submit' value='Save' onClick = {saveNoteHandler} /> {error ? <Alert/> : ''} </form> ) } export default AddNoteForm أرجو المساعدة من خلال الإطلاع على كامل الكود في الرابط التالي https://github.com/Saadaoui-Forkan/my-to-do-lidt شكرا

هنا أيضا لم تظهر note في القائمة الجانبية شيفرة Notes import React,{useState} from 'react' import './Notes.css' import Note from './Note' function Notes({notes}) { return ( <div className='notes'> { (notes || []).map(note => <Note key={note.id} title={note.title} content={note.content}/>) } <button className='add-btn'>+</button> </div> ) } export default Notes Note import React,{} from 'react' function Note({title}) { return ( <h2 className='note'> {title} </h2> ) } export default Note

قمت باستخدامها و لكن لاتوجد نتيجة

ظهرت رسالة الخطأ التالية Notes.js:8 Uncaught TypeError: Cannot read properties of undefined (reading 'lenght') at Notes (Notes.js:8:1)

السلام عليكم. كيف يمكنني إصلاح الشيفرة التالية: function Notes({notes}) { return ( <div className='notes'> { if (notes.length !== 0) { notes.map(note => { return <Note key={note.id} title={note.title} content={note.content}/> }) } } <button className='add-btn'>+</button> </div> ) } للتوضيح: قمت بجلب notes من import React , {useState} from 'react' import './AddNoteForm.css'; import Alert from '../Alert/Alert' import Notes from '../Notes/Notes' function AddNoteForm() { const [title,setTitle] = useState('') const [content,setContent] = useState('') const [error,setError] = useState(false) const [notes,setNotes] = useState([]) 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) } } return ( <form> <input className='title-content input' type='text' placeholder='title' value={title} onChange={handleChange_title} /> <textarea className='note-content input' type='text' placeholder='text' rows='8' value={content} onChange={handleChange_content} /> <input className='input-btn input' type='submit' value='Save' onClick = {saveNoteHandler} /> {error ? <Alert/> : ''} </form> ) } export default AddNoteForm شكرا

السلام عليكم. في الكود التالي ينبهني terminal إلى رسالة الخطأ التالية: Array.prototype.map() expects a value to be returned at the end of arrow function مع العلم أن الكود يعمل بشكل صحيح. الكود: import React,{useState} from 'react' import './Notes.css' import Note from './Note' function Notes() { const arr = ["A","B","C","D"] const [count,setCount] = useState(0) const handleAdd = () => { if (count < arr.length) { setCount(count+1) console.log(arr[count]); } } return ( <div className='notes'> { arr.map((el, i) => { if (i < count) return <Note title={el} key={i} i={i} />; }) } <button className='add-btn' onClick={handleAdd}>+</button> </div> ) } export default Notes //error message WARNING in [eslint] src\Notes\Notes.js Line 17:19: Array.prototype.map() expects a value to be returned at the end of arrow function array-callback-return webpack compiled with 1 warning شكرا لكم.

السلام عليكم. في الكود التالي: import React,{useState} from 'react' import './Notes.css' import Note from './Note' function Notes() { const arr = ["A","B","C","D"] const [count,setCount] = useState(0) const handleAdd = () => { if (count < arr.length) { setCount(count+1) console.log(arr[count]); } } return ( <div className='notes'> { arr.map((el,i)=> ( <Note title={el} key={i} i={i} /> )) } <button className='add-btn' onClick={handleAdd}>+</button> </div> ) } export default Notes كيف يمكنني الربط بين button و Note بحيث عند الضغط على الزر يضاف عنصر جديد من المصفوفة arr. شيفرة Note import React,{} from 'react' function Note({title,i}) { return ( <h2 className='note'> {i}: {title} </h2> ) } export default Note شكرا لكم.

السلام عليكم. عادة ما يدل اللون الأحمر في vs code على وجود خطأ ما. لماذا إذن تظهر index.css باللون الأحمر رغم عدم ظهور errors في terminal. شكرا.

شكرا على التوضيح و المساعدة

حسنا هل يصح عمل الkey بهذه الطرقة <PlantItem key = {id} id={id} cover={cover} name={name} water={water} light={light} /> مع العلم أن PlantItem هي <li key={id} className='lmj-plant-item'> <img src={cover} alt={`{name}cover`} className='lmj-plant-item-cover' /> {name} <div> <CareScale careType='water' scaleValue={water} /> <CareScale careType='light' scaleValue={light} /> </div> </li>

يعني قمنا بتعويض plantList.map((plant) => ( <PlantItem id = plant.id name = plant.name . . /> )) و أين سأضيف key في هذه الحالة

السلام عليكم. هل من توضيح حول إستعمال map في react js. حصلت لي لخبطة خاصة عند إستعمال props. مثال: const plantList = [ { name: 'monstera', category: 'classique', id: '1ed', isBestSale: true, light: 2, water: 3, cover: monstera }, { name: 'ficus lyrata', category: 'classique', id: '2ab', light: 3, water: 1, cover: monstera }, { name: 'pothos argenté', category: 'classique', id: '3sd', light: 1, water: 2, cover: monstera }, { name: 'yucca', category: 'classique', id: '4kk', light: 3, water: 1, cover: monstera }, { name: 'olivier', category: 'extérieur', id: '5pl', light: 3, water: 1, cover: monstera }, { name: 'géranium', category: 'extérieur', id: '6uo', light: 2, water: 2, cover: monstera }, { name: 'basilique', category: 'extérieur', id: '7ie', isBestSale: true, light: 2, water: 3, cover: monstera }, { name: 'aloe', category: 'plante grasse', id: '8fp', light: 2, water: 1, cover: monstera }, { name: 'succulente', category: 'plante grasse', id: '9vn', light: 2, water: 1, cover: monstera } ] {plantList.map(({id,cover,name,water,light}) => ( <PlantItem id={id} cover={cover} name={name} water={water} light={light} /> شكرا

السلام عليكم. من المعلوم أن react js حديثا صار يعتمد على function component لكن كمبرمج من الضروري تعلم class component لأن أغلب تطبيقات الويب القديمة إعتمدت الأخيرة وبالتالي لابد من دراستها حتى تستطيع معالجة المشاريع القديمة. و لكن سؤالي هل أن class component تعتمد على javascript oop. شكرا.

السلام عليكم. كيف يمكن إصلاح الخطأ التالي 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. Learn more: https://reactjs.org/link/switch-to-createroot شكرا

عند إعطاء الأمر npm start في مشروع رياكت يتم فتح المتصفح internet explore كيف يمكن تغيير المتصفح ليصبح google chrome. شكرا.

ملاحظات قيمة جدا شكرا