How to recreate the code using Rendering solution

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?