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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

<Notes notes={notes} />

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

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

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

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

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

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

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

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

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

شكرا

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

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

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

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

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