texi rv texi rv - 4 months ago 13
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}>
<div className={`portfolio-type ${sports.type.trim().toLowerCase()}`}>&nbsp;</div>
<span className="testing">
screenReaderLabel="Portfolio ETF explanation"
headerTitle: `Why did we choose ${sports.person}?`,
maxWidth: 'auto',
enableCloseShortcuts: true,
showA11yBottomCloseLink: true
<div className="dia-modal-content">
<ModalContainer />


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>{sports.person}</span> - <span>{sports.name}</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.