Change last class React.Component by functional implementation

Author: VincentD06

src/web/wizard/components/inputs/Description.jsx

@@ -15,44 +15,37 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 
-import PropTypes from 'prop-types';
-import React from 'react';
+import React, {useState} from 'react';
 import { Input, Row, Col } from 'components/bootstrap';
 import { FormattedMessage } from 'react-intl';
 
-class Description extends React.Component {
+const Description = ({description, onUpdate}) => {
 
-    static propTypes = {
-        onUpdate: PropTypes.func,
-    };
+    const [state, setState] = useState({description: description});
 
-    static defaultProps = {
-        description:'',
+    const _onValueChanged = (field) => {
+        return e => {
+            setState({description: e.target.value});
+            onUpdate(field, e.target.value);
+        };
     };
 
-    state = {
-        description: this.props.description
-    };
+    return (
+        <Row>
+            <Col md={2} style={{ marginTop: 5, marginBottom: 0 }}>
+                <label className="pull-right" ><FormattedMessage id= "wizard.titleDescription" defaultMessage= "Description (optional)" /></label>
+            </Col>
+            <Col md={10}>
+                <Input style={{minWidth: 600}} id="description" name="description" type="textarea"
+                               onChange={_onValueChanged("description")} defaultValue={state.description}/>
+            </Col>
+        </Row>
+    );
+}
 
-    _onValueChanged(field) {
-        return e => {
-            this.props.onUpdate(field, e.target.value);
-        };
-    }
-    
-    render() {
-        return (
-            <Row>               
-                <Col md={2} style={{ marginTop: 5, marginBottom: 0 }}>
-                    <label className="pull-right" ><FormattedMessage id= "wizard.titleDescription" defaultMessage= "Description (optional)" /></label>
-                </Col>
-                <Col md={10}>    
-                    <Input style={{minWidth: 600}} ref="description" id="description" name="description" type="textarea"
-                                   onChange={this._onValueChanged("description")} defaultValue={this.state.description}/>
-                </Col>
-            </Row>
-        );
-    }
+Description.defaultProps = {
+    description: '',
+    onUpdate: () => {}
 }
 
 export default Description;