"Transformed the search bar into a functional component with slight modifications.

client/modules/IDE/components/Searchbar/Searchbar.jsx

@@ -1,71 +1,61 @@
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import React from 'react';
 import { throttle } from 'lodash';
 import { withTranslation } from 'react-i18next';
 import i18next from 'i18next';
 import SearchIcon from '../../../../images/magnifyingglass.svg';
 
-class Searchbar extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      searchValue: this.props.searchTerm
-    };
-    this.throttledSearchChange = throttle(this.searchChange, 500);
-  }
+const Searchbar = ({
+  searchTerm,
+  setSearchTerm,
+  resetSearchTerm,
+  searchLabel = i18next.t('Searchbar.SearchSketch'),
+  t
+}) => {
+  const [searchValue, setSearchValue] = useState(searchTerm);
+  const throttledSearchChange = throttle(() => {
+    setSearchTerm(searchValue.trim());
+  }, 500);
 
-  componentWillUnmount() {
-    this.props.resetSearchTerm();
-  }
+  useEffect(() => {
+    return () => {
+      resetSearchTerm();
+    };
+  }, [resetSearchTerm]);
 
-  handleResetSearch = () => {
-    this.setState({ searchValue: '' }, () => {
-      this.props.resetSearchTerm();
-    });
+  const handleResetSearch = () => {
+    setSearchValue('');
+    resetSearchTerm();
   };
 
-  searchChange = () => {
-    this.props.setSearchTerm(this.state.searchValue.trim());
+  const searchChange = () => {
+    setSearchTerm(searchValue.trim());
   };
 
-  handleSearchChange = (e) => {
-    this.setState({ searchValue: e.target.value }, () => {
-      this.throttledSearchChange(this.state.searchValue.trim());
-    });
+  const handleSearchChange = (e) => {
+    const value = e.target.value;
+    setSearchValue(value);
+    throttledSearchChange();
   };
 
-  render() {
-    const { searchValue } = this.state;
-    return (
-      <div
-        className={`searchbar ${
-          searchValue === '' ? 'searchbar--is-empty' : ''
-        }`}
-      >
-        <div className="searchbar__button">
-          <SearchIcon
-            className="searchbar__icon"
-            focusable="false"
-            aria-hidden="true"
-          />
-        </div>
-        <input
-          className="searchbar__input"
-          type="text"
-          value={searchValue}
-          placeholder={this.props.searchLabel}
-          onChange={this.handleSearchChange}
-        />
-        <button
-          className="searchbar__clear-button"
-          onClick={this.handleResetSearch}
-        >
-          {this.props.t('Searchbar.ClearTerm')}
-        </button>
+  return (
+    <div className={`searchbar ${searchValue === '' ? 'searchbar--is-empty' : ''}`}>
+      <div className="searchbar__button">
+        <SearchIcon className="searchbar__icon" focusable="false" aria-hidden="true" />
       </div>
-    );
-  }
-}
+      <input
+        className="searchbar__input"
+        type="text"
+        value={searchValue}
+        placeholder={searchLabel}
+        onChange={handleSearchChange}
+      />
+      <button className="searchbar__clear-button" onClick={handleResetSearch}>
+        {t('Searchbar.ClearTerm')}
+      </button>
+    </div>
+  );
+};
 
 Searchbar.propTypes = {
   searchTerm: PropTypes.string.isRequired,
@@ -79,4 +69,4 @@ Searchbar.defaultProps = {
   searchLabel: i18next.t('Searchbar.SearchSketch')
 };
 
-export default withTranslation()(Searchbar);
+export default withTranslation()(Searchbar);