понятно, идеальных нет, кроме пхп, дело вкоса

bruh

Зачем ты по больному?)

толсто?)

Ога у меня аж жир потек

не, я не смог распарсить сарказма)

Всем привет.

Есть объект у которого в свойствах лежат компоненты.

export const ExternalLinkIconsMap = {
    [ExternalLinkCode.Comp1]: StyledIcon1,
    [ExternalLinkCode.Comp2]: StyledIcon2,
};

Далее, в другом компоненте я импортирую этот объект и внутри .map метода назначаю переменной эти компоненты и рендерю.

{links.map(({ title, code, url }) => {
    const ExternalLinkIcon = ExternalLinkIconsMap[code];

    return (
        <Tooltip key={code} content={title} destroyTooltipOnHide placement="bottom">
            <ExternalLink href={url} keepDefault target="_blank" onClick={handleClick(code)}>
                <IconButton type="primary" size="medium">
                    <ExternalLinkIcon />
                </IconButton>
            </ExternalLink>
        </Tooltip>
    );
})}

Получаю вот такую ошибку:

JSX element type 'ExternalLinkIcon' does not have any construct or call signatures.

В чём может быть дело?

export const ExternalLinkIconsMap = {
    [ExternalLinkCode.Comp1]: StyledIcon1,
    [ExternalLinkCode.Comp2]: StyledIcon2,
};

{links.map(({ title, code, url }) => {
    const ExternalLinkIcon = ExternalLinkIconsMap[code];

    return (
        <Tooltip key={code} content={title} destroyTooltipOnHide placement="bottom">
            <ExternalLink href={url} keepDefault target="_blank" onClick={handleClick(code)}>
                <IconButton type="primary" size="medium">
                    <ExternalLinkIcon />
                </IconButton>
            </ExternalLink>
        </Tooltip>
    );
})}

Тебе надо в мапе jsx-ом писать

Объясни плиз подробнее

В мапе не StyledIcon, а <StyledIcon />

Попробуй так

м… опять не понял…
У меня там есть угловые скобки. Придерживаюсь jsx синтаксиса.
Можешь плиз код мой исправить показать как надо?

👋
и у меня вопрос назрел:
в events приходит действительно немало объектов, порядка полутора сотен, semantic-ui-react же почему-то рендерит визуально не все, хоть в DOM-е все и присутствуют.
Может, кто сталкивался с чем-то подобным?

export const ExternalLinkIconsMap = {
    [ExternalLinkCode.Comp1]: <StyledIcon1 />,
    [ExternalLinkCode.Comp2]: <StyledIcon2 />,
};

попробуй

так и скажи, работает ли

export const ExternalLinkIconsMap = {
    [ExternalLinkCode.Comp1]: <StyledIcon1 />,
    [ExternalLinkCode.Comp2]: <StyledIcon2 />,
};

попробуй

Но мне надо чтобы в объекте были именно компоненты а не элементы

это тебе в чат по css
у тебя внешние размеры списка фиксированные, поэтому весь список визуально в контейнер и не помещается

почему?

ну пропсы передать например какие то)

но он не передаёт в примере)