JavaScript Injection

JavaScript Injection to HTML

What if we want to add some JS functionality inside our HTML? Normally you need to write functions, to grab some elements by selectors, and then change the innerHTML or the innerText etc.

Well react provides a much neater way of doing these things and interpolating JS expressions inside JSX. As it seems, in React whatever needs to be evaluated has to be inside curly brace { }. This will escape the actual content, and it will execute JS code in place.

The example above will render 'A header inside HTML' inside the h1.

Attention: In order for this to work, the variables must be initiated inside the same render function of the component. Otherwise everything will be out of scope, and the JSX that is rendered from component's render function, will have no access to outside variables.