Error: Cannot update a component (`AppProvider`) while rendering a different component (`Unknown`)-CodePudding

I am getting the following warning in the console:

Warning: Cannot update a component (`AppProvider`) while rendering a different component (`Unknown`). To locate the bad setState() call inside `Unknown`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at http://localhost:3000/static/js/bundle.js:359:65
    at ul
    at main
    at Notes (http://localhost:3000/static/js/bundle.js:485:65)
    at div
    at Layout (http://localhost:3000/static/js/bundle.js:649:5)
    at div
    at App
    at AppProvider (http://localhost:3000/static/js/bundle.js:757:5)

this is a notes app, but I'm struggling in solve the error. All started when i tried to add the "delete" feature for deleting notes. I tried to use the useEffect hook but it didn't work well.

The problem is when i set the notes to be the new array of notes, all the notes disappears. I believe this have something to do with render a component from another component.

here is my code:

//context.js
import { nanoid } from 'nanoid'
import React, { useState, useContext } from 'react'

const AppContext = React.createContext()

export const AppProvider = ({ children }) => {
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [notes, setNotes] = useState([
          { text: 'Nice example', id: nanoid() },
        ])

  const openModal = () => {
    setIsModalOpen(true)
  }

  const closeModal = () => {
    setIsModalOpen(false)
  }

  const addNotes = (text) => {
    const newNote = {id: nanoid(), text: text }
    setNotes([...notes, newNote]) // the problem started when i added this!
  }

  const deleteNote = (id) => {
    const newNotes = notes.filter(note => id !== note.id)
    setNotes([...newNotes])
  }



  return (
    <AppContext.Provider 
      value={{ 
        openModal, 
        closeModal, 
        isModalOpen, 
        notes, 
        addNotes,
        deleteNote
      }}
    >
      {children}
    </AppContext.Provider>
  )
}

export const useGlobalContext = () => {
  return useContext(AppContext)
}

//note.jsx

import React, {memo} from 'react'
import { isEqual } from 'lodash'
import { FaRegEdit } from 'react-icons/fa'
import { RiDeleteBin6Line } from 'react-icons/ri'
import { useGlobalContext } from '../../context'
import './Notes.scss'

const Note = memo((note) => {
  const { deleteNote } = useGlobalContext()
  return (
    <li className="app__note">
      <p className="app_note-description p-text">{note.text}</p>

      <div className="app__note-options">
        <div className="app__note-category" />
        <div className="app_note-icons">
          <FaRegEdit />
          <RiDeleteBin6Line onClick={deleteNote(note.id)} />
        </div>
      </div>
    </li>
  )
}, isEqual)

export default Note

CodePudding user response：

Replace

<RiDeleteBin6Line onClick={deleteNote(note.id)} />

<RiDeleteBin6Line onClick={() => deleteNote(note.id)} />