How JSX prevents cross site scripting attacks?

When using JSX inside the reactJS application it can prevent the XSS (cross-site-scripting) attack. Let say we are getting a response from a user input or a third party call and we want to render that on our web page.

When the React DOM renders anything to the browser it escapes any values embedded in JSX. This way we can ensure that it is not possible to inject anything that’s not explicitly written in our application.

Following is a code segment that is safe from XSS (cross-site-scripting) attack.

const userResponse = userInputResponse;
// This is safe:
const topElement = <h1>{userResponse}</h1>