Блог

Я создаю простое приложение для перетаскивания задач и хотел бы понять, как я могу отображать заметки в столбце, который у меня есть, вызывая функцию, которая сопоставляет массив заметок и возвращает элемент JSX <Note/> .

Вот столбец:

 <DragDropContext onDragEnd={handleOnDragEnd}>
    <Column
    dropId={uuidv4()}
    text="To-Do"
      showNotes={displayNotes()}
    />
  

И вот отображение функции над массивом заметок:

 function displayNotes() {
notes.map((note, index) => {
  return (
    <Note key={index} id={uuidv4()} noteContent={note} index={index} />
  );
});
  

}

Это работало, когда я помещал метод map непосредственно в реквизит showNotes <Column/> . Но как только я разделяю метод map на его собственную функцию и вызываю его в реквизите showNotes <Column/> , функциональность не может отображать заметки.

Вы забыли возврат для функции?

 function displayNotes() {
 return notes.map((note, index) => {
  return (
    <Note key={index} id={uuidv4()} noteContent={note} index={index} />
  );
})
};