O'Reilly logo

Mastering React by Ryan Vice, Adam Horton

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Forms

Form components such as <input/>, <textarea/> and <option/> are handled differently by React as they allow for being mutated by the users input unlike static components like <div/> or <h1/>. As we will the dynamic nature of form components combined with the determination of React components can lead to some unexpected things when you are first learning React.

Controlled components - the read-only input

Let's start by exploring the concept of controlled components by looking at the following code:

var TextBox = React.createClass({
    render: function() {
        return <input type='text' value='Read only'/>;
    }
});

ReactDOM.render(
    <TextBox/>,
    document.getElementById('view'));

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required