CODEWITHSUNDEEP
javascriptreactjsjsx
Sattyaki
Sattyaki

Reputation: 406

Unexpected token - JavaScript expression in JSX

I have an input field which should be readonly based on some state change. So I have written the JSX like below:

render: function() {
var reo = 'readonly';
return (<input id="output" type="Text" value="0" {reo}/>);
}

In the above code variable reo is hardcoded but in the real scenario it will be evaluated based on some condition like:

var reo = (isDisabled ? 'readonly' : '');

When I am running this it is giving unexpected token error. Whereas when I am writing JSX like this:

<input id="output" type="Text" value="0" readonly/>

it is working fine. Please explain me why this error is occurring and how to correct it.

Upvotes: 2

Views: 220

Answers (1)

Yossi
Yossi

Reputation: 6027

The problem in the example is that you pass a string while react expects a prop with the name readonly.

The following should work:

render: function() {
  var reo = true;
  return (
    <input id="output" type="Text" value="0" readonly={reo} />
  );
}

Or using isDisabled:

render: function() {
      return (
        <input id="output" type="Text" value="0" readonly={isDisabled} />
      );
    }

Upvotes: 2

Related Questions