Replace React createElement Function Call with JSX

I have a very basic question. I need to know whether we need to create an element every time before calling render method. How to replace the World with Universe?

var greetings = 'World'
var element = <h1>Hello, {greetings}</h1>

ReactDOM.render(
  element,
  document.getElementById('root')
);

greetings = 'Universe'

ReactDOM.render(
  element,
  document.getElementById('root')
);

Hi ahairshi 👋

Thanks for the question. This is fairly fundamental JavaScript and has to do with the fact that a variable reassignment does not change the result of where the variable was used in the past. Alternatively you could make this work by making the variable an object and manipulating that object:

var state = {}
state.greetings = 'World'
var element = <h1>Hello, {state.greetings}</h1>

ReactDOM.render(
  element,
  document.getElementById('root')
);

state.greetings = 'Universe'

ReactDOM.render(
  element,
  document.getElementById('root')
);

So that will work as you expect it to because you're manipulating the object that the element is referencing.

This is not idiomatic react however. If you want to learn more about managing state in react, keep watching :) Good luck!

Very solid Kent, would love to see you do more React fundamentals! Do you have any other recommended resources?

thanks Kent for a solid course;

can you explain this bit of code: (() => content)(), especially the last set of parenthesis?

Thanks

Hi Jared Hensley, you might appreciate this blog post: How to React.

Hi RentPath User 5 :) So, let's refactor that code and maybe it'll make more sense:

const getContent = () => content
getContent()

So the original code is called an immediately invoked function expression (IIFE for short). It's a way that you can encapsulate some logic within a closure (function) without having to give the function a name. In the video I just used it to demonstrate that any JavaScript expression can be used in the { and } of JSX. I wouldn't normally recommend doing something like that, but it could be useful if you want to define variables and keep them scoped to the function. In the future there may be a better way to do that with do expressions.

Good luck!

This is so cool

Why isn't my code showing anything on Code Sandbox? It's exactly the same a in the video.

<div id="root"></div>
<script src="https://unpkg.com/react@16.3.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

<script type="text/babel">
  const rootElement = document.getElementById("root");

  const content = "Hello World";
  const element = <div className="container">{content}</div>;
  ReactDOM.render(element, rootElement);
</script>

Why isn't my code showing anything on Code Sandbox? It's exactly the same a in the video.

<div id="root"></div>
<script src="https://unpkg.com/react@16.3.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

<script type="text/babel">
  const rootElement = document.getElementById("root");

  const content = "Hello World";
  const element = <div className="container">{content}</div>;
  ReactDOM.render(element, rootElement);
</script>

I don't think that the Code Sandbox can handle Babel.