How do I add a break line to this object literal in react?-CodePudding

I have a Column Component, and I'm trying to display these two data points with a break line, please help.

right now the result is:

BusinessName UserName

I'd like:

BusinessName

UserName

<Column
     calculateCellValue={(cellData: { BusinessName: string; UserName: string }) => 
     `${cellData.BusinessName} ${cellData.UserName}`}
/>

CodePudding user response：

insert "\n" :

<Column
     calculateCellValue={(cellData: { BusinessName: string; UserName: string }) => 
     `${cellData.BusinessName}  "\n"  ${cellData.UserName}`}
/>

CodePudding user response：

You should probably share the source code for the Column component as well, but see if this one works:

<Column
     calculateCellValue={(cellData: { BusinessName: string; UserName: string }) => 
     `${cellData.BusinessName}\n${cellData.UserName}`}
/>

CodePudding user response：

just add <br/> betwen the names

<Column
 calculateCellValue={(cellData: { BusinessName: string; UserName: string }) => 
 `<div style="display: flex; flex-direction: column"><p>${cellData.BusinessName}</p><p>${cellData.UserName}</p></div>`}
/>