Вернуть массив объекта в компоненте ioni c reactjs

Question

У меня есть этот компонент, который вызывается в моем основном файле, этот компонент отображает все данные, данные возвращают массив

    import React, { Component } from 'react';
    import {
        IonRow,
        IonCol
    } from '@ionic/react';
    
    import data from '../data/data.json';
    
    const BookList: React.FC = () => {
        
        return(
            data.data.map((context) => {
            <IonRow>
                <IonCol size="9">
                    <p>{context.name}</p>
                </IonCol>
                <IonCol size="3">
                    <p>{context.payload}</p>
                </IonCol>
            </IonRow>
            })
        );
        
    };
    
    export default BookList;

И ошибка примерно такая:

ошибка

где-то в объявлении списка книг. Я новичок в реакции, поэтому мне сложно понять, в чем заключается основная проблема. Я пытался найти какие-либо решения, но не могу найти четкого и ясного решения, которое я понимаю.

Answer 1

попробуйте это:

const BookList: React.FC = () => (       
  <>
    {data.data.map(({ name, payload }) => (
      <IonRow>
           <IonCol size="9">
               <p>{name}</p>
           </IonCol>
           <IonCol size="3">
               <p>{payload}</p>
           </IonCol>
       </IonRow>
    ))}
  </>
);