SearchBar Funcional

src/components/Search.jsx

@@ -2,7 +2,7 @@ import React, {Fragment, useEffect, useState} from "react";
 import queryString from "query-string";
 
 import {searchArtist, searchDisc, searchSong} from "../services/search_service";
-import SearchBar from "./SearchBar";
+import {SearchBar} from "./SearchBar";
 import {Paginate} from "./Paginate";
 import {Link} from "react-router-dom";
 import {Tab, TabList, TabPanel, Tabs} from "react-tabs";

src/components/SearchBar.jsx

@@ -1,33 +1,22 @@
-import React from "react";
+import React, {useState} from "react";
 import {FaSearch} from 'react-icons/fa';
 
-export default class SearchBar extends React.Component {
+export const SearchBar = (props) => {
-    constructor(props) {
+    const [query, setQuery] = useState(props.query ? props.query : '')
-        super(props);
+    const onQueryChanged = props.onQueryChanged;
-        this.state = {
-            query: this.props.query ? this.props.query : ''
-        };
-    }
 
-    handleChange = event => {
+    const handleChange = event => setQuery(event.target.value);
-        const query = event.target.value;
-        this.setState({query: query});
-    };
 
-    handleSubmit = (who) => (event) => {
+    const handleSubmit = (who) => (event) => {
-        const query = this.state.query;
+        if ((query && onQueryChanged) && (event.key === 'Enter' || who === 'button')) {
-        if (!query) return;
+            onQueryChanged(query)
-
-        if (event.key === 'Enter' || who === 'button') {
-            const onQueryChanged = this.props.onQueryChanged;
-            if (onQueryChanged) onQueryChanged(query)
         }
     };
 
-    render = () => (
+    return (
         <div className='input-with-icon'>
-            <input className='full-width' value={this.state.query} onKeyUp={this.handleSubmit('input')} onChange={this.handleChange}/>
+            <input className='full-width' value={query} onKeyUp={handleSubmit('input')} onChange={handleChange}/>
-            <button onClick={this.handleSubmit('button')}><FaSearch/></button>
+            <button onClick={handleSubmit('button')}><FaSearch/></button>
         </div>
     );
 }

src/index.jsx

@@ -1,7 +1,7 @@
 import React, {Fragment} from 'react';
 import ReactDOM from 'react-dom';
 import {Search} from './components/Search';
-import SearchBar from "./components/SearchBar";
+import {SearchBar} from "./components/SearchBar";
 
 import './styles/reset.css';
 import './styles/main.scss';