How to make white space to be counted as character in React Js?

Question

I have an array with strings which have white space, like this:

let myArr=["Hello       ", "Bonjour      ", "Buenos dias      "]

When I'm checking the length of each string, characters count includes white space too, but when I'm using these strings in a code, they don't have white space, for ex.when I'm mapping through array to display strings like this

myArr.map((h) => h)

in console.log strings length includes white space, but when I'm trying to display them in a code, they are shown without white space, so instead of **Hello // should be a lot of space ** it gets displayed as Hellowith no space.

How can I make whitespace have the same length and width as characters? I need to display each strings the same length as in array ( having the same space after).

Answer 1

If you are trying to render it inside html. Try to use the pre tag or the css property white-space: pre-wrap;

return (
    <div>
      <pre>{myArr.map((h) => h)}</pre>
    </div>
  );