Bonjour à tous, je voudrait créer un moteur de recherche avec react et axios.Je débute avec React!
Je me suis aider de ce tuto mais la présentation ne me plais pas, il fonctionne bien dans mon premier projet mais pas après mes modification. Je n'ai pas d'erreurs juste que je n'ai aucun resultat de trouver.
Voici le lien de mon modele
https://dev.to/danilo95/react-autocomplete-search-input-debounce-2mof
voici mon component du moteur de recherche:
import React, { useState, useEffect } from 'react';
import { ReactSearchAutocomplete } from 'react-search-autocomplete'
import { getApiSuggestions } from './requests';
function LiveSearch() {
const [options, setOptions] = useState([]);
const [loading, setLoading] = useState(false);
const getSuggestions = async (word) => {
if (word) {
setLoading(true);
let response = await getApiSuggestions(word);
setOptions(response);
setLoading(false);
} else {
setOptions([]);
}
};
const getApiUrl = (url) => {
window.open(url, '_blank');
};
return (
<div className="App">
<header className="App-header">
<div style={{ width: 200 }}>
<ReactSearchAutocomplete
loading={loading}
options={options}
requests={getSuggestions}
onClickFunction={getApiUrl}
placeholder="find a public api"
/>
</div>
</header>
</div>
)
}
export default LiveSearch
Voici mon code pour la recherche :
import axios from 'axios';
const url = axios.create({
baseURL: 'https://api.publicapis.org/',
});
export const getApiSuggestions = (word) => {
let result = url
.get(/entries?title=${word}
)
.then((response) => {
return response.data;
})
.catch((error) => {
return error;
});
return result;
};
Je ne sait pas si j'ai été claire mais je débute avec React! Cordialement