Передача компонента значка другому компоненту в ReactJS

Question

Допустим, у меня есть этот компонент CardHeader, и я хочу получить реквизит titleIcon (который является компонентом реакции) следующим образом:

export default function CardHeader({ title, cardContent, titleIcon }) {
  return (
    <S.MiddleContainer>
      <div className="white-card">
        <div className="campaign-title p-1">
          <div className="d-flex justify-content-center align-items-center pt-1">
            {titleIcon}
            <span id="title">{title}</span>
          </div>
          <div className="pr-2">
            <MdInfo color="#969FAA" size={28} />
          </div>
        </div>

        <p id="border" />
        <div className="campaign-information">
         {cardContent}
        </div>
    </div>
  </S.MiddleContainer>

Здесь я передаю значокprop

import { MdInfo } from 'react-icons/md'

    <Col md={3}>
            <S.ProductContainer>
              <CardHeader 
              title="Sponsors Channel" 
              icon="<MdInfo color="#969FAA" size={28} />"/>

              <Card title="Mobile notification boost" />
            </S.ProductContainer>
          </Col>

Как лучше всего подойти к этому?

Answer 1

вы можете передать свой значок как React.Node (не как строку), например так:

     <Col md={3}>
        <S.ProductContainer>
          <CardHeader 
          title="Sponsors Channel" 
          icon={<MdInfo color="#969FAA" size={28} />} />

          <Card title="Mobile notification boost" />
        </S.ProductContainer>
      </Col>

И у вас будет доступ к нему через реквизиты в CardHeader :

export default function CardHeader({ title, cardContent, icon }) {
return (
<S.MiddleContainer>
  <div className="white-card">
    <div className="campaign-title p-1">
      <div className="d-flex justify-content-center align-items-center pt-1">
        {icon}
        <span id="title">{title}</span>
      </div>
      <div className="pr-2">
        <MdInfo color="#969FAA" size={28} />
      </div>
    </div>

    <p id="border" />
    <div className="campaign-information">
     {cardContent}
    </div>
</div>

Answer 2

Вот вы:

<CardHeader 
  title="Sponsors Channel" 
  titleIcon={<MdInfo color="#969FAA" size={28} />}
/>