Визуализация массива JSX.Element ИЛИ HTMLElement React Typescript

Question

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

import React, { useState, ReactElement } from 'react';
import { Card, ListGroup } from 'react-bootstrap';

interface Side {
  imgSrc?: string;
  title?: string;
  text?: string;
  body?: (HTMLElement | JSX.Element)[];
}

interface CCardProps {
  className?: string;
  front?: Side;
  back?: Side
}

const CCard: React.FC<CCardProps> = ({ className, front = {}, back = front }) => {
  const [cardValue, setCardValue] = useState(front);

  return (
    <Card className={className || ''} onClick={() => cardValue === front ? setCardValue(back) : setCardValue(front)} style={{ width: "19rem", minHeight: '26rem' }}>
      {cardValue.imgSrc && <Card.Img style={{ maxHeight: '100%', maxWidth: '100%' }} variant="top" src={cardValue.imgSrc} />}
      <Card.Body>
        {cardValue.title && <Card.Title>{cardValue.title}</Card.Title>}
        {cardValue.text && <Card.Text>{cardValue.text}</Card.Text>}
        {cardValue.body && cardValue.body.length > 0 && cardValue.body.map((item, index) => 
          // What do I do here?
        }
      </Card.Body>
    </Card>
  )
};

export default CCard;

// Example use
<CCard 
  front={{
    imageUrl: 'cutePuppyPhoto',
    body: [
      <a href="#">Click me!</a>,
    ]
  }}
  back={{
    title: 'This is a title',
    text: 'This is some text',
    body: [
      <Card.Text>Hello There</Card.Text>
    ]
  }}
/>

cardValue.body может быть как HTML-элементами <a> or <h1> и т. Д., Так и другими элементами JSX (если я хочу добавить <Card.Text> или что-то в этом роде. Сейчас я не знаю, как динамически отобразить оба этих с помощью ключа . Любая помощь будет оценена.

Answer 1

Оказывается, я тупой, массив уже заполнен elements, а не значениями, поэтому мне не нужна карта.

<Card className={className} onClick={() => cardValue === front ? setCardValue(back) : setCardValue(front)} style={{ width: "19rem", minHeight: '26rem' }}>
  {cardValue.imgSrc && <Card.Img style={{ maxHeight: '100%', maxWidth: '100%' }} variant="top" src={cardValue.imgSrc} />}
  <Card.Body>
    {cardValue.title && <Card.Title>{cardValue.title}</Card.Title>}
    {cardValue.text && <Card.Text>{cardValue.text}</Card.Text>}
    {cardValue.body}
  </Card.Body>
</Card>

Значения карты, а не элементы kids