(jsx) Use padEnd in an element's text

Question

const text = 'testing'.padEnd(25) + 'John'

return (
    <li>{text}</li>
)

expected result:

<li>testing                  John</li>

Actual output:

<li>testing John</li>

What is the simplest way to get the expected result?

Related to this: Best practice when adding whitespace in JSX But how should I go about it with padding?

Answer 1

You can use the HTML tag <pre>, that maintains the text as presented, to surround the text variable.

class Example extends React.Component {
  render() {
    const text = 'testing'.padEnd(25) + 'John';
    return (
      <div><pre>{text}</pre></div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>