JSX variable update not being reflected on a page

Question

I am trying to add a JSX variable to a page. I first initialized it as null because it may be potentially unused, but I want to add the JSX to the page if an event is triggered. The handler is executed once the user finishes text input and closes a modal window. I can successfully get their text up to this handler function below, but for some reason the variable's JSX is not being reflected on the current page after the modal is closed.

let other = null;

const handler = (text) => {
    other = (
        <li>
            <span className="bold">Other: </span>
            {text}}<span className="right">Price Unknown</span>
        </li>
    );
};

Later, I simply use this variable in my JSX

<div className="other">
    {other}
</div>

Why exactly isn't this update reflecting on the page after the modal is closed? Where I expect the newly added list element to be, it's blank as if {other} is still referring to null. Is this an issue with the page needing to rerender?

Please post a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) using codesandbox or other online editors. — palaѕн, Mar 21 '20 at 08:05

Brijesh Bhakta · Answer 1 · 2020-03-21T08:29:27.113

The way you are using the variable is incorrect.

I wrote an answer to a similar question here. It shows how to update the view and how to declare the variables.

Please check the answer there and let me know if you still have questions.

Here is a short summary from the answer there:

If you want to update the view as well (Which is your case), you should use state and setState method when you set or change the value.

Example:

class MyContainer extends Component {

    state = { testVarible: "this is a test" };

    onMove = () => {
        console.log(this.state.testVarible);
        this.setState({ testVarible: "new value" });
    }
}

Having that said I still feel you are making it complicated that it should be.

What you should be doing is this.

state = { text: 'some text' };
const handler = (text) => {
  this.setState({ text });
};

While the jsx should have this:

<div className="other">
  <li>
    <span className="bold">Other: </span>{this.state.text}
    <span className="right">Price Unknown</span>
  </li>
</div>

Updated with what the issue is, the variable needs to be stored in state and should be updated using setState. A component won't rerender if you change any variable as it is mentioned in the answer. In order to make it render again state or prop needs to be updated, so here the value should be stored in state. — Brijesh Bhakta, Mar 21 '20 at 08:23

priyanshu sinha · Accepted Answer · 2020-03-21T08:30:05.850

you need to call the handler function and return the HTML you want to render. Also, if you're trying to update a variable and render it then use setState for class-based component or [stateName, stateUpdateMethod] = useState(null) for functional components and then use stateUpdateMethod to trigger re-render.

import React from "react";
import ReactDOM from "react-dom";

const handler = (text) => <div>{text}</div> 
const App = () => handler("I am the text")

const rootElement = document.getElementById("root");
ReactDOM.render(
  <App />,
rootElement
);

JSX variable update not being reflected on a page

2 Answers2