texi rv texi rv - 1 month ago 6
React JSX Question

add person and name in separate span tags


  • i am trying to add person and name in separate span tags

  • right now I am receive it one span tag

  • is it possible to put in separate span tags, since both the values we are getting in variable sportsData

  • how to add span tag between sports.person and sports.name

  • providing my code snippet below



renderDetailsports(sports, index) {
let sportsData = `${sports.person} - ${sports.name}`;

return (
<tr key={index}>
<td>
<div className={`portfolio-type ${sports.type.trim().toLowerCase()}`}>&nbsp;</div>
</td>
<td>
<span className="testing">
{
!SportsJSON[sports.person]
?
sportsData
:
sports.person
?
<div>
<ModalTrigger
className="sports-modal-trigger-portfolio"
label={sportsData}
screenReaderLabel="Portfolio ETF explanation"
anchorTag='true'
modal={{
headerTitle: `Why did we choose ${sports.person}?`,
maxWidth: 'auto',
enableCloseShortcuts: true,
showA11yBottomCloseLink: true
}}
>
<div className="dia-modal-content">
{this.renderSportsJSON(sports.person)}
{this.etfGlossary()}
</div>
<ModalContainer />
</ModalTrigger>
</div>
:
sports.name
}
</span>
</td>
<td>{sports.percentage.toFixed(2)}%</td>
<td>{moneyFormat(sports.value)}</td>
</tr>
);
},

Answer

I guess you want to add a span around the sports to the below line

let sportsData = `${sports.person} - ${sports.name}`;

You can change the above line to something similar to below:

let sportsData = (
 <span>
  <span>{sports.person}</span> - <span>{sports.name}</span>
 </span>
);

This would render two spans with person and name each. The outer span is just a dummy holder since there can be only one root element. Once you understand the idea here, you can re-write it as you need.