اذهب إلى المحتوى
  • 0

كيفية إستعمال if condition في jsx

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

السؤال

السلام عليكم.

كيف يمكنني إصلاح الشيفرة التالية:

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

شكرا

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

مرحباً محمود،

جرب وضع إشارة استفهام بين الـ notes و الـ map كالتالي :

notes?.map

وهذا يعني إذا كانت الـ notes موجودة، قم بعمل map وإلا قم بإعادة undefined.

{ 
  notes?.map(note => {
    return <Note key={note.id} title={note.title} content={note.content}/>
  })  
}
  
// وشكل آخر هو
notes.lenght !== 0 && notes.map(note => {
  return <Note key={note.id} title={note.title} content={note.content}/>
}) 

حيث أن الـ && تعني إذا كان الأول صحيحاً أعد الثاني.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 37 دقائق مضت قال عمر قره محمد:

مرحباً محمود،

جرب وضع إشارة استفهام بين الـ notes و الـ map كالتالي :


notes?.map

وهذا يعني إذا كانت الـ notes موجودة، قم بعمل map وإلا قم بإعادة undefined.


{ 
  notes?.map(note => {
    return <Note key={note.id} title={note.title} content={note.content}/>
  })  
}
  
// وشكل آخر هو
notes.lenght !== 0 && notes.map(note => {
  return <Note key={note.id} title={note.title} content={note.content}/>
}) 

حيث أن الـ && تعني إذا كان الأول صحيحاً أعد الثاني.

ظهرت رسالة الخطأ التالية

Notes.js:8 Uncaught TypeError: Cannot read properties of undefined (reading 'lenght')
    at Notes (Notes.js:8:1)

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ منذ ساعة مضت قال محمود سعداوي:

ظهرت رسالة الخطأ التالية

Notes.js:8 Uncaught TypeError: Cannot read properties of undefined (reading 'lenght')
    at Notes (Notes.js:8:1)

إذا استخدم الطريقة الأولى :

{ 
  notes?.map(note => {
    return <Note key={note.id} title={note.title} content={note.content}/>
  })  
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ الآن قال عمر قره محمد:

إذا استخدم الطريقة الأولى :


{ 
  notes?.map(note => {
    return <Note key={note.id} title={note.title} content={note.content}/>
  })  
}

 

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ منذ ساعة مضت قال محمود سعداوي:

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

اعتقد ان ذلك لأنك لم تستخدم المكون Notes في الكود الخاص بك

جرب إضافة الـ :

<Notes notes={notes} />

وانظر كيف انها ستعمل بنجاح

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ منذ ساعة مضت قال محمود سعداوي:

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

يمكنك تعيين قيمة افتراضية للمتغير notes تكون مصفوفة فارغة في حال لا يوجد بيانات، من داخل المكون يمكنك ذلك كالتالي:

<div className='notes'>
  {
    (notes || []).map(note => <Note key={note.id} title={note.title} content={note.content}/>)
  }
  ...
</div>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 2 دقائق مضت قال Hassan Hedr:

يمكنك تعيين قيمة افتراضية للمتغير notes تكون مصفوفة فارغة في حال لا يوجد بيانات، من داخل المكون يمكنك ذلك كالتالي:


<div className='notes'>
  {
    (notes || []).map(note => <Note key={note.id} title={note.title} content={note.content}/>)
  }
  ...
</div>

 

هنا أيضا لم تظهر 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

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ منذ ساعة مضت قال محمود سعداوي:

هنا أيضا لم تظهر 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 لم تمرر للمكون Notes واستُخدمت القيمة الافتراضية وهي المصفوفة الفارغة، لذا تأكد أن قيمة notes تمرر بشكل صحيح للمكون وتحوي قيمة

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 3 دقائق مضت قال Hassan Hedr:

في حال لم يظهر أي عنصر يعني أن قيمة notes لم تمرر للمكون Notes واستُخدمت القيمة الافتراضية وهي المصفوفة الفارغة، لذا تأكد أن قيمة 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

 

أرجو المساعدة من خلال الإطلاع على كامل الكود في الرابط التالي

https://github.com/Saadaoui-Forkan/my-to-do-lidt

شكرا

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ منذ ساعة مضت قال محمود سعداوي:

لا يمكنني تمرير مصفوفة فارغة 


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

شكرا

في الشيفرة المرفقة لا يوجد استخدام للمكون Notes تأكد من مكان استخدامه وطريقة تمرير تلك الخاصية، كما يرجى إرفاق الجزء من الشيفرة الخاص بذلك الاستخدام بدلًا من رابط خارجي

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 26 دقائق مضت قال Hassan Hedr:

في الشيفرة المرفقة لا يوجد استخدام للمكون 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>
  );
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 5 ساعات قال محمود سعداوي:

قمت باستخدام 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>
  );
}

 

لاحظ أنك لم تمرر للمكون Notes الخاصية notes وهذا سبب المشكلة، يجب تمرير تلك الخاصية كالتالي:

<Notes notes={...} .../>
               ^

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...