Reactjs TextArea object is read only instead of mutable

Question

I have a TextArea object that will not allow new text to be entered. Initially I had tried this without the constructor, but would get areas when I would try to call my on change method because it was not bound to this. Adding the constructor to bind the onChange method disallows me from entering text.

        class TextAreaCounter extends React.Component{
            constructor(props) {
                super(props);
                this._textChange = this._textChange.bind(this);
            }
            getInitialState() {
                return {
                    text: this.props.text,
                };
            }
            _textChange(ev) {
                this.setState({
                    text: ev.target.value,
                });
            }
            render() {
                return React.DOM.div(null,
                    React.DOM.textarea({
                        value: this.props.text,
                        onChange: this._textChange,
                    }),
                    React.DOM.h3(null, this.props.text.length)
                );
            }
        }
        TextAreaCounter.PropTypes = {
            text: React.PropTypes.string,
        }
        TextAreaCounter.defaultProps = {
            text: '',
        }
        ReactDOM.render(
            React.createElement(TextAreaCounter, {
                text: "billy",
            }),
            document.getElementById("app")
        );

eclipse · Accepted Answer · 2017-05-27 13:55:15Z

I found the answer!

First, I was using this.props instead of this.state in the render method. So, my onChange method was called but never actually updating.

Second, getIntialState is deprecated, so I update to a state object in the constructor.

       class TextAreaCounter extends React.Component{
            constructor(props) {
                super(props);
                this._textChange = this._textChange.bind(this);
                this.state = {
                    text: this.props.text,
                };
            }
            _textChange(ev) {
                this.setState({
                    text: ev.target.value,
                });
            }
            render() {
                return React.DOM.div(null,
                    React.DOM.textarea({
                        value: this.state.text,
                        onChange: this._textChange,
                    }),
                    React.DOM.h3(null, this.state.text.length)
                );
            }
        }

TLadd · Accepted Answer · 2017-05-27 13:48:50Z

0

You should be passing this.state.text as the value to your textarea instead of this.props.text.

answered May 27, 2017 at 13:48

TLadd

6,9042 gold badges34 silver badges40 bronze badges

1 Comment

eclipse Over a year ago

Correct! And I should set a state in the constructor.

Collectives™ on Stack Overflow

Reactjs TextArea object is read only instead of mutable

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related