How to recreate the code using Rendering solution-CodePudding

let nickName:string = "Laruo May";
let spaicing:string[] = nickName.split("");

const hello:JSX.Element = <div>
                              {spaicing.map((space:string) => <div>{letter.replace(" ", "*-*")}</div>)}   
                            </div>

I'm going to change the space in the name to -. I'm going to change it using conditional rendering, but how can I change the code below?

CodePudding user response：

You can use replaceAll().

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll

let nickName = "Laruo May";
let spaicing = nickName.replaceAll(" ", "-").split("");

console.log(spaicing)

CodePudding user response：

Here's a slight adjustment to the code you've provided that should achieve what you want. When rendering a list of items, be sure to assign a unique key to each element.

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>

<div id="main"></div>

<script type="text/babel" data-type="module" data-presets="typescript,react">

const nickName = 'Laruo May';

const element = (
  <div>
    {[...nickName].map((letter, index) => (
      <div key={`${index}${letter}`}>{letter.replace(' ', '*-*')}</div>
    ))}   
  </div>
);

ReactDOM.render(element, document.getElementById('main'));

</script>