React 16 Essentials - Second Edition

Creating the CollectionRenameForm component

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

import React, { Component } from 'react'; import Header from './Header'; import Button from './Button'; const inputStyle = { marginRight: '5px' }; class CollectionRenameForm extends Component { constructor(props) { super(props); const { name } = props; this.state = { inputValue: name }; } setInputValue = (inputValue) => { this.setState({ inputValue }); } handleInputValueChange = (event) => { const inputValue = event.target.value; this.setInputValue(inputValue); } handleFormSubmit = (event) => { event.preventDefault(); const { onChangeCollectionName } = this.props; const { inputValue: collectionName } = this.state; onChangeCollectionName(collectionName); ...