Unexpected token - JavaScript expression in JSX

Question

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.

Yossi · Accepted Answer · 2018-06-11 14:34:06Z

2

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} />
      );
    }

edited Jun 11, 2018 at 14:34

answered Jun 11, 2018 at 4:37

Yossi

6,0877 gold badges50 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Harshal Yeole Over a year ago

You must specify why the code of OP is not working and why your code will work.

Yossi Over a year ago

Not sure what must means... :) I am volunteering here :) The problem in the example is that you pass a string while react expects a prop with the name readonly...

Harshal Yeole Over a year ago

Yup, I know, that's what I am saying. Just post some details about it in answer. :)

Collectives™ on Stack Overflow

Unexpected token - JavaScript expression in JSX

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related