Input field is not editable in reactjs

Question

I am building a Markdown Previewer and i have a textarea where the user can type and see the result in real time on typing but i am struggling because the textarea can not be edited. I am using markedjs.

class Previewer extends Component {
constructor(props) {
    super(props);
    this.state = { value: 'Heading\n=======\n\nSub-heading\n-----------\n \n### Another deeper heading\n \nParagraphs are separated\nby a blank line.\n\nLeave 2 spaces at the end of a line to do a  \nline break\n\nText attributes *italic*, **bold**, \n`monospace`, ~~strikethrough~~ .\n\nUnordered list:\n\n  * apples\n  * oranges\n  * pears\n\nNumbered list:\n\n  1. apples\n  2. oranges\n  3. pears\n\nThe rain---not the reign---in\nSpain.\n\n *[David Dume](https://www.freecodecamp.com/dumed)*' };

    this.updateValue = this.updateValue.bind(this);
  }
  updateValue(val) {
    this.setState = { value: val };
  }
  markup(text) {
    var markup = marked(text, { sanitize: true });
    return { __html: markup}
  }
  render() {
    return (
      <div className='row'>
        <div className='col-md-6'>
          <Markdown value={this.state.value} updateValue={this.updateValue} />
        </div>
        <div className='col-md-6'>
          <span dangerouslySetInnerHTML={this.markup(this.state.value)} />
        </div>
      </div>
    );
  }
}

Here i defined the textarea.

 class Markdown extends Component {
  constructor(props) {
    super(props);

    this.onChange = this.onChange.bind(this);
  }
  onChange(e) {
    var textarea = reactDOM.findDOMNode(this.refs.textarea);
    var val = textarea.value;
    this.props.updateValue(val);
  }
  render() {
    return (
      <div className={this.props.className}>
        <textarea rows='22' type='text' value={this.props.value} ref='textarea'  className='form-control' onChange={this.onChange} />
      </div>
    );
  }
}

Mayank Shukla · Accepted Answer · 2018-02-26T16:00:53.353

Issue is you are not updating the state properly. setState is a function not a value, you need to call that function and pass an object with key that you want to update.

Write it like this:

updateValue(val) {
   this.setState({ value: val });
}

onChange(e) {
   var val = e.target.value;
   this.props.updateValue(val);
}

For details about setState check this answer.

See the jsfiddle for working example: https://jsfiddle.net/g5e7akc6/

score 0 · Answer 2 · answered Jan 14 '17 at 13:32

Here are multiple things which are wrong / can be improved.

this.setState = { value: value }

this.setState is a function, use ist like this this.setState({ value: value })

In Markdown Component

onChange(e) {
  var val = e.target.value;
  this.props.updateValue(val);
}

Input field is not editable in reactjs

2 Answers2