React.js Essentials

Creating the CollectionRenameForm component

First, let's create the ~/snapterest/source/components/CollectionRenameForm.react.js file:

var React = require('react'); var ReactDOM = require('react-dom'); var Header = require('./Header.react'); var Button = require('./Button.react'); var inputStyle = { marginRight: '5px' }; var CollectionRenameForm = React.createClass({ getInitialState: function() { return { inputValue: this.props.name }; }, setInputValue: function (inputValue) { this.setState({ inputValue: inputValue }); }, handleInputValueChange: function (event) { var inputValue = event.target.value; this.setInputValue(inputValue); }, handleFormSubmit: function (event) { event.preventDefault(); var collectionName = this.state.inputValue; this.props.onChangeCollectionName(collectionName); ...