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

قمت باستخدام 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. شكرا.

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

بعد أن قمت بالعديد من الإصلاحات أرجو رأيكم في الموقع التالي: https://my-free-ecommerce.netlify.app/ شكرا.

شكرا على تفاعلكم. وقع حل المشكل.

السلام عليكم. في الكود التالي في صورة عدم تطابق البيانات لاتظهر رسالة الخطأ إلا في الخانة الأولى و لا يقع ظهور رسالة الخطأ إلا عند إصلاح التي قبلها. في الصورة الإيميل غير مطابق و لاتظهر رسالة الخطأ إلا بعد أصلاح username و كذلك كلمة المرور غير مطابقة و لا تظهر رسالة الخطأ إلا بعد إصلاح الإيميل. و هكذا دواليك. الكود: // register-username-register-email-register-password-register-btn let form = document.querySelector('form') let username = document.querySelector(".register-username") let email = document.querySelector(".register-email") let password = document.querySelector(".register-password") let confirmPassword = document.querySelector('.register-confirm-password') let registerBtn = document.querySelector(".register-btn") // show input error message function showError(input,message) { const formControl = input.parentElement formControl.classList = "form-control error" const small = formControl.querySelector('small') small.innerText = message } // show success outline function showSuccess(input) { const formControl = input.parentElement formControl.classList = "form-control success" } // check email is valid function checkEmail(input) { const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; if (re.test(input.value.trim())) { showSuccess(input) return true } else { showError(input, 'Email is not valid') return false } } // check passwords much function checkPassword(input1, input2) { if (input1.value != input2.value) { showError(input2, 'Passwords do not much') return false } else { return true } } // check required fields function checkRequired(inputArr) { let result = true; inputArr.forEach(function (input) { if (input.value.trim() === '') { showError(input, `${getFieldName(input)} is required`) result = false } else { showSuccess(input) } }) return result; } // check input length function checkLength(input, min, max) { if (input.value.length < min) { showError(input, `${getFieldName(input)} must be at least ${min}`) return false } else if (input.value.length > max) { showError(input, `${getFieldName(input)} must be less than ${max}`) return false } else { showSuccess(input) return true } } // get field name function getFieldName(input) { return input.id.charAt(0).toUpperCase() + input.id.slice(1) } // event listeners form.addEventListener('submit', function (e) { e.preventDefault() if (checkRequired([username, email, password, confirmPassword]) && checkLength(username, 4, 15) && checkLength(password, 6, 20) && checkEmail(email)) { localStorage.setItem("register-username", username.value) localStorage.setItem("register-email", email.value) localStorage.setItem("register-password", password.value) setTimeout(() => { window.location = "./login.html" }, 1000) } }) الرجاء التوضيح و شكرا.

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

السلام عليكم. في الكود التالي: // register-username-register-email-register-password-register-btn let form = document.querySelector('form') let username = document.querySelector(".register-username") let email = document.querySelector(".register-email") let password = document.querySelector(".register-password") let confirmPassword = document.querySelector('.register-confirm-password') let registerBtn = document.querySelector(".register-btn") // show input error message function showError(input,message) { const formControl = input.parentElement formControl.classList = "form-control error" const small = formControl.querySelector('small') small.innerText = message } // show success outline function showSuccess(input) { const formControl = input.parentElement formControl.classList = "form-control success" } // check email is valid function checkEmail(input) { const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; if (re.test(input.value.trim())) { showSuccess(input) } else { showError(input, 'Email is not valid') } } // check passwords much function checkPassword(input1, input2) { if (input1.value != input2.value) { showError(input2, 'Passwords do not much') } } // check required fields function checkRequired(inputArr) { inputArr.forEach(function (input) { if (input.value.trim() === '') { showError(input, `${getFieldName(input)} is required`) } else { showSuccess(input) } }) } // check input length function checkLength(input, min, max) { if (input.value.length < min) { showError(input, `${getFieldName(input)} must be at least ${min}`) } else if(input.value.length > max){ showError(input, `${getFieldName(input)} must be less than ${max}`) } else { showSuccess(input) } } // get field name function getFieldName(input) { return input.id.charAt(0).toUpperCase() + input.id.slice(1) } // event listeners form.addEventListener('submit', function(e){ e.preventDefault() if (checkRequired([username,email,password,confirmPassword]) || checkLength(username, 4, 15) || checkLength(password, 6, 20) || checkEmail(email)){ localStorage.setItem("register-username", username.value) localStorage.setItem("register-email", email.value) localStorage.setItem("register-password", password.value) } setTimeout(()=>{ window.location = "./login.html" }, 1000) }) يقع الذهاب إلى صفحة ./login.html حتى في صورة إدخال بيانات غير مطابقة. ما أريده هو في صورة وجود بيانات غير مطابقة تظهر لي رسائل الخطأ أما في صورة تطابق البانات يقع المرور للصفحة الموالية. شكرا.

شكرا. نسيت بأن أقول أن الموقع متجاوب مع جميع الشاشات

السلام عليكم. أرجو تقديم رأيكم حول الموقع الذي قمت بإنشائه. هذا الموقع إعتمدت فيه الكثير من logic لكن أرجو أن الdesign ليس كارثي. هو موقع بسيط لكن أخذ مني الكثير من الوقت و أتوجه بالشكر لكل المدربين الذي قاموا بمساعدتي، رأيكم يهمني حتى أتمكن من تحسينه. شكرا. https://initial-e-commerce.netlify.app/

للأسف صديقي