I'm trying to add a space between span and text in React but it seems it behaves differently in JSX? here is the code

return(
    <div>
         <h1 className="navbar"> <span style={styles}> {timeOfDay} </span> 
          {`${firstName} ${lastName}`} It is currently {hours} clock</h1>
    </div>
    )

As you can see {timeOfDay} which is good night is sticking to the text, what im trying to do is have a space between them, how can i achieve that in React?

I'm trying to add a space between span and text in React but it seems it behaves differently in JSX? here is the code

return(
    <div>
         <h1 className="navbar"> <span style={styles}> {timeOfDay} </span> 
          {`${firstName} ${lastName}`} It is currently {hours} clock</h1>
    </div>
    )

As you can see {timeOfDay} which is good night is sticking to the text, what im trying to do is have a space between them, how can i achieve that in React?

• javascript
• html
• reactjs
• html-table

1 Answer 1

There are multiple ways to add space between elements in JSX

1. Use  

    return(
       <div>
         <h1 className="navbar"> <span style={styles}> {timeOfDay} </span> 
          &nbsp;{`${firstName} ${lastName}`} It is currently {hours} clock</h1>
      </div>
    )

2. Use {' '}

    return(
       <div>
         <h1 className="navbar"> <span style={styles}> {timeOfDay} </span> 
          {` ${firstName} ${lastName}`} It is currently {hours} clock</h1>
      </div>
    )

3. Use CSS(padding/margin to span)