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

محمود سعداوي2 · 19 نوفمبر 2022

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

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

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

شكرا

عمر قره محمد · 20 نوفمبر 2022

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

جرب وضع إشارة استفهام بين الـ 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}/>
})

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

محمود سعداوي2 · 20 نوفمبر 2022

بتاريخ 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)

عمر قره محمد · 20 نوفمبر 2022

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

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

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}/>
  })  
}

محمود سعداوي2 · 20 نوفمبر 2022

بتاريخ الآن قال عمر قره محمد:
إذا استخدم الطريقة الأولى :
{ 
  notes?.map(note => {
    return <Note key={note.id} title={note.title} content={note.content}/>
  })  
}

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

عمر قره محمد · 20 نوفمبر 2022

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

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

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

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

<Notes notes={notes} />

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

Hassan Hedr · 20 نوفمبر 2022

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

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

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

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

محمود سعداوي2 · 20 نوفمبر 2022

بتاريخ 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

Hassan Hedr · 20 نوفمبر 2022

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

هنا أيضا لم تظهر 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 تمرر بشكل صحيح للمكون وتحوي قيمة

محمود سعداوي2 · 20 نوفمبر 2022

بتاريخ 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

شكرا

Hassan Hedr · 20 نوفمبر 2022

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

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


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 تأكد من مكان استخدامه وطريقة تمرير تلك الخاصية، كما يرجى إرفاق الجزء من الشيفرة الخاص بذلك الاستخدام بدلًا من رابط خارجي

محمود سعداوي2 · 20 نوفمبر 2022

بتاريخ 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>
  );
}

Hassan Hedr · 20 نوفمبر 2022

بتاريخ 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={...} .../>
               ^

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

السؤال

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

12 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

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

عمر قره محمد

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

عمر قره محمد

Hassan Hedr

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

Hassan Hedr

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

Hassan Hedr

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

Hassan Hedr

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية