طلب مساعدة: التعرف على عنصر محدد داخل مصفوفة (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

شكرا