React renders component based on any changes on its state (i.e. data)<\/em>.<\/p>\n In React, a form input component controlled by it is known as controlled component<\/strong>. These components maintains their own state and update itself based on user input as depicted by the following code:<\/p>\n The App component above has a message attribute<\/strong> in state <\/strong>as seen in the following snippet:<\/p>\n We can bound the message attribute to the text input via the value attribute<\/strong> and listen to the changes on itself using the onChange attribute<\/strong> which in turn updates the state of the message like the following snippet:<\/p>\n The handleMsgChange<\/strong>\u00a0that is bound to text input onChange attribute<\/strong> must update the message state<\/strong> of the React App component and could have the following implementation. This makes the React state as the single source of truth.<\/p>\n This particular implementation will also trigger the re-render of the MessageView component since it is also dependent to the state of the message as we can see in the following snippet:<\/p>\n React might batch multiple setState function calls<\/strong> into a single update for performance. Thus the correct way to change the React state is by using the setState function that accepts a function instead of object like the following snippet:<\/p>\n Let us try to create a reusable\u00a0ButtonClear component<\/strong> that will clear value of the message attribute with the following snippet.<\/p>\n Based on the preceding snippet the ButtonClean component will only display the clear button<\/strong> if we tell it to make it visible via its visible attribute<\/strong>. Moreover, it is also expecting to have a handleClear implementation<\/strong> that will be bound to button's\u00a0onClick attribute<\/strong>.<\/p>\n The handleClear implementation<\/strong> will be provided by the App component like the following snippet with the recommended usage of the setState() function:<\/p>\n Thus we can use the ButtonClear component in the App component like the following snippet:<\/p>\n We also instructed it to make the clear button visible only if the message is not empty.<\/p>\n The updated complete code with ButtonClear component can be seen as follows:<\/p>\nUpdating State with Form Components<\/h4>\n
Code 1 - Controlled Text Input<\/h6>\n
const MessageView = (props) => {\r\n return(\r\n <h1>{props.message}<\/h1>\r\n );\r\n}\r\n\r\nclass App extends React.Component {\r\n state = {\r\n message : \"\"\r\n };<\/strong>\r\n\r\n handleMsgChange = (event) => {\r\n this.setState({\r\n message: event.target.value\r\n });\r\n }<\/strong>\r\n \r\n render() {\r\n return(\r\n <div>\r\n <input type=\"text\" placeholder=\"Type Something\" value={this.state.message}<\/strong> onChange={this.handleMsgChange}<\/strong>\/>\r\n <MessageView message={this.state.message<\/strong>}\/>\r\n <\/div>\r\n );\r\n }\r\n}\r\n\r\nReactDOM.render(<App \/>, mountNode);<\/pre>\nSnippet 1 - App Component State<\/h6>\n
state = {\r\n message : \"\"\r\n};\r\n<\/pre>\nSnippet 2 - Controlled Text Input<\/h6>\n
<input type=\"text\" placeholder=\"Type Something\" value={this.state.message}<\/strong> onChange={this.handleMsgChange}<\/strong>\/><\/pre>\nSnippet 3 - handleMsgChange Implementation<\/h6>\n
handleMsgChange = (event) => {\r\n this.setState({\r\n message: event.target.value\r\n });<\/strong>\r\n}<\/pre>\nSnippet 4 - MessageView listening to the State of the Message<\/h6>\n
<MessageView message={this.state.message}<\/strong>\/>\r\n<\/pre>\nUpdating State that may be Asynchronous<\/h4>\n
Snippet 5 - Updating the React State<\/h6>\n
this.setState((prevState, props) => {\r\n \/\/Do the state update here.\r\n})<\/pre>\nSnippet 6 - ButtonClear Component<\/h6>\n
const ButtonClear = (props) => {\r\n if (props.visible<\/strong>) {\r\n return(\r\n <button onClick={props.handleClear}<\/strong>>Clear<\/button>\r\n );\r\n }\r\n return(null); \/\/Returns nothing\r\n}\r\n<\/pre>\nSnippet 7 - App Component handleClear Implementation<\/h6>\n
handleClear = () => {\r\n this.setState((prevState, props) => {\r\n return {message: \"\"}; \/\/Clears the message\r\n });<\/strong>\r\n}<\/pre>\nSnippet 8 - Using the ButtonClear in the App Component<\/h6>\n
<ButtonClear handleClear={this.handleClear}<\/strong> visible={this.state.message!=\"\"}<\/strong>\/><\/pre>\nCode 2 - The Complete Code<\/h6>\n
const MessageView = (props) => {\r\n return(\r\n <h1>{props.message}<\/h1>\r\n );\r\n}\r\n\r\nconst ButtonClear = (props) => {\r\n if (props.visible) {\r\n return(\r\n <button onClick={props.handleClear}>Clear<\/button>\r\n );\r\n }\r\n return(null);\r\n}<\/strong>\r\n\r\nclass App extends React.Component {\r\n state = {\r\n message : \"\"\r\n };\r\n\r\n handleMsgChange = (event) => {\r\n this.setState({\r\n message: event.target.value\r\n });\r\n }\r\n \r\n handleClear = () => {\r\n this.setState((prevState, props) => {\r\n return {message: \"\"}; \/\/Clears the message.\r\n });\r\n }<\/strong>\r\n \r\n render() {\r\n return(\r\n <div>\r\n <input type=\"text\" placeholder=\"Type Something\" value={this.state.message} onChange={this.handleMsgChange}\/>\r\n <ButtonClear handleClear={this.handleClear} visible={this.state.message!=\"\"}\/><\/strong>\r\n <MessageView message={this.state.message}\/>\r\n <\/div>\r\n );\r\n }\r\n}\r\n\r\nReactDOM.render(<App \/>, mountNode);<\/pre>\n