Uncaught SyntaxError: embedded: JSX value should be either an expression or a quoted JSX text (8:26)

Question

• I am trying to display a text box in react.

• but I am getting an error. Uncaught SyntaxError: embedded: JSX value should be either an expression or a quoted JSX text (8:26)

• can you guys tell me how to fix it.

• providing it below.

https://jsfiddle.net/q7yvmsa3/3/

var Hello = React.createClass({
  render: function() {
    return (<div>Hello {this.props.name}
                    <textarea value = this.state.value>
                        there should be only 140 characters
                </textarea>
    </div>);
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

Answer 1

The value of an attribute must be an expression {foo} or quoted text "foo"

use this line

<textarea value = {this.state.value}>

instead of

<textarea value = this.state.value>

example:

var Hello = React.createClass({
getInitialState() {
    return { value:"hello"};
  },
  render: function() {
    return (<div>Hello {this.props.name}
                    <textarea value = {this.state.value}>
                        there should be only 140 characters
                </textarea>
    </div>);
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

Working jsfiddle: https://jsfiddle.net/mwu28tx4/