Carousel links + press "Enter" to search (pu juste le boutton)

GrossesMitaines/grosses-mitaines-ui/src/components/ResearchBar.js

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-
+import { useEffect } from 'react';
 
 
 const ResearchBar = () => {
@@ -8,8 +8,9 @@ const ResearchBar = () => {
     const navigate = useNavigate();
     const [value, setValue] = useState("");
 
+
     const search = async (query) => {
-        navigate('/morceaux', { state: { query: query} });
+        navigate('/morceaux', { state: { query: query } });
     }
 
     const handleValueChange = async (value) => {
@@ -18,7 +19,15 @@ const ResearchBar = () => {
 
     return (
         <div className="research-container">
-            <input className="research-input" value={value} onChange={(e) => handleValueChange(e.target.value)} placeholder="Rechercher..."></input>
+            <input className="research-input"
+                onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                        search(value);
+                    }
+                }}
+                value={value}
+                onChange={(e) => handleValueChange(e.target.value)}
+                placeholder="Rechercher..."></input>
             <button className="research-btn" onClick={() => search(value)}>
                 <div className="fa fa-search" />
             </button>