put icon and text in the same column-CodePudding

I have the interface shown in the image, and this interface contains several columns, and in the column "الاسم الثلاثي" I want to put an icon "FastBackwardOutlined" next to each name, but instead of placing an icon, I see the "[object][object]" table as shown in the image.

How can I solve the problem?

               return data?.map((row: any) => {
                        return {
                            ...row,
                            supervisoryDoctor:
                                row.supervisoryDoctor?.label,
                            trinomialName:
                            `${<FastBackwardOutlined />}`   row.trinomialName
                        };
                    });

CodePudding user response：

You cannot put it in a string.

You could use

trinomialName: (<React.Fragment>
    <FastBackwardOutlined /> {row.trinomialName}
  </React.Fragment>)