# Handling JavaScript within JSX

## JavaScript within JSX

Surround `JS` variable with`{}`to render them within`JSX` elements.

{% tabs %}
{% tab title="index.js" %}

```jsx
import React from "react"
import ReactDOM from "react-dom"

function App() {
  // Declare JS Variable
  const name = "John Doe"
  
  // Declare Date Object
  const date = new Date()
  const hours = date.getHours()
  let timeOfDay
  
  // Logic
  if (hours < 12) {
    timeOfDay = "morning"
  } else if (hours >= 12 && hours < 17) {
    timeOfDay = "afternoon"
  } else {
    timeOfDay = "night"
  }
  
  // Return Output
  return (
    // Surrounding JS variables with {} 
    <h1>Good {`${timeOfDay} ${name}`}!</h1> 
  )
}

ReactDOM.render(<App />, document.getElementById("root"))

// Output: Good night John Doe! [timeOfDay depends on current time]
```

{% endtab %}

{% tab title="index.html" %}

```markup
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="root"></div>
        <script src="index.pack.js"></script>
    </body>
</html>
```

{% endtab %}
{% endtabs %}
