Creating an HTML editor component with ReactJS

Question

New to React, please point out if I've headed down the wrong track: I'm trying to build an HTML editor component, which so far looks like this:

var CopyEditor = React.createClass({
  render: function(){
    var pageBody = "<p>My HTML string ...";
    return (
      <form id="editForm" method="POST">
        <textarea id="editor" name="body" value=pageBody />
        <input type="submit" id="saveBt" value="save" class="button-primary" />
      </form>
    );
  }
});

But I'm getting the following error in the console:

Uncaught Error: Parse Error: Line 6: Unexpected token ILLEGAL at http://localhost:8000/index.html

var pageBody = '
^

My HTML string is being generated on the Server, and there's a newline where the carot is pointing in the error message. What SHOULD I be doing?

nilgun · Accepted Answer · 2015-02-07 23:25:03Z

1

You dont really need dangerouslySetInnerHTML with textarea. You can just use value prop:

http://jsfiddle.net/egkc7dbd/

var CopyEditor = React.createClass({
  onChange : function(){
  },
  render: function(){
    var pageBody = "<p>My HTML string ...";
    return (
      <form id="editForm" method="POST">
        <textarea id="editor" name="body" value="<p>My HTML string ..." onChange={this.onChange}/>
        <input type="submit" id="saveBt" value="save" className="button-primary" />
      </form>
    );
  }
});

React.render(<CopyEditor/>, document.body);

UPDATE

According to the documentation you can have line breaks using \n. The first solution is missing {} around value prop.

new jsfiddle: http://jsfiddle.net/jwb50xu9/

var CopyEditor = React.createClass({
  onChange : function(){
  },
  render: function(){
    var pageBody = "<p> \n My HTML string ...";
    return (
      <form id="editForm" method="POST">
        <textarea id="editor" name="body" value={pageBody} onChange={this.onChange}/>
        <input type="submit" id="saveBt" value="save" className="button-primary" />
      </form>
    );
  }
});

React.render(<CopyEditor/>, document.body);

edited Feb 7, 2015 at 23:25

answered Feb 7, 2015 at 22:56

nilgun

10.6k4 gold badges48 silver badges57 bronze badges

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

3 Comments

saturdayplace Over a year ago

Ah, thanks! That makes the code quite a bit cleaner. I realized that originally my pageBody var wasn't enclosed in quotes, so I did that, and am getting a different error than what I originally posted, which I've updated above.

saturdayplace Over a year ago

Many thanks! I found that my error results from having linefeed characters (\u000a) in my string, which are ILLEGAL in JavaScript. I think once I replace them with newlines, I'll be set.

learning_vba Over a year ago

but textarea will not display HTML markup. It just displays as a string right ?

Collectives™ on Stack Overflow

Creating an HTML editor component with ReactJS

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