如何在 React-Bootstrap 中使用 React 组件作为 Form.Select 的选项

Question

I'm implementing a Form.Select that should have another react component as its options.

Here, the name of the Form.Select is "Collection" and its options should be a card component (with an image) called "CollectionCard".

This is the expected implementation. https://i.stack.imgur.com/8yWZ3.png (Refer this image)

And, here is my current code.

<Form.Group controlId="form.collection">
    <Form.Label className="fw-bold">Collection</Form.Label>
    <Form.Select className="mb-5" aria-label="Collection">
        <option value="1">
            <CollectionCard />
        </option>
        <option value="2">
            <CollectionCard />
        </option>
    </Form.Select>
</Form.Group>

But this is how it actually shows in the UI with the above code. https://i.stack.imgur.com/eI8hv.png (Refer this image)

The "CollectionCard" component is not getting rendered inside the Form.Select and it shows as [object Object] .

Updated I tried adding {} for the "CollectionCard" as well,

<option value="2">
   {<CollectionCard />}
</option>

Still not working.

Updated Adding CollectionCard component code below.

import React from 'react';

import './CollectionCard.scss';

import {Card} from 'react-bootstrap';

export const CollectionCard: React.FC = (props) => {
    return (
        <div className="collection-card">
            <Card className="d-flex flex-row border-0 bg-transparent">
                <Card.Img className="card-img-xs" src={require('../../../../assets/nft-sample.png')} alt="img" />
                <Card.Body className="p-0 ms-3 align-self-center">
                    Lorep Ipsum
                </Card.Body>
            </Card>
        </div>
    )
}

Please help me to get this resolved. Thanks!

Answer 1

just set your component inside of bracket

<Form.Group controlId="form.collection">
<Form.Label className="fw-bold">Collection</Form.Label>
<Form.Select className="mb-5" aria-label="Collection">
    <option value="1">
        {<CollectionCard />}
    </option>
    <option value="2">
        {<CollectionCard />}
    </option>
</Form.Select>
</Form.Group>