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

طلب مساعدة: التعرف على عنصر محدد داخل مصفوفة (react js)

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

السؤال

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

عند النقر على 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;

 

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

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

عند النقر على 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

شكرا

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

Recommended Posts

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

تفضل

src.zip

هنالك مشكلتان،

الأولى في ملف الـ app وتحديداً في الوظيفة noteClicked :

// الكود الخاص بك
const noteClicked = (id) => {
    setCreating(false)
    let selectedNote = notes.find((note)=> note.id === id)
    setContent(selectedNote.content)
    setTitle(selectedNote.title)
    setShowNote(true)
}

// الكود الصحيح
const noteClicked = (id) => {
    setCreating(false)

    // أو اي اسم آخر theClickedNote قم بتغير اسم المتغير إلى 
    let theClickedNote = notes.find((note) => note.id === id)
    // selectedNote المسمات state  قم بإضافته لل
    setSelectedNote(theClickedNote.id)

    setContent(selectedNote.content)
    setTitle(selectedNote.title)
    setShowNote(true)
}

حيث انك لم تكن تقوم بتعديل الـ state المسماة selectedNote في الوظيفة المسماة noteClicked.

والمشكلة الثانية في ملف الـ Notes.js وتحديداً في السطر 13 حيث انك كتبت selectedNote بدلاً من note.id كباراميتر للوظيفة noteClicked الخاصة بتغيير الـ selectedNote وهذا ما سبب ان الـ selectedNote لا تتغير.

// الكود الخاص بك
 noteClicked={() => noteClicked(selectedNote)}
  
// الكود الصحيح هو  
 noteClicked={() => noteClicked(note.id)}

 

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

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

هل يمكنك مشاركة مجلد الـ src بالكامل حتى يسهل علي الاطلاع على المشروع الخاص بك.

تفضل

src.zip

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...