React Select Search With Live Data Fetching From API
Create a file ReactSelectSearch.jsx
import React from "react";
import SelectSearch from "react-select-search";
function ReactSelectSearch() {
return (
<div>
<SelectSearch
options={searchState}
// className="search_input css-scope jk-search-box"
getOptions={(query) => {
return axios({
method: "POST",
url: `search`,
params: {
q: query,
// "limit": "2",
// "offset": 1
},
})
.then((response) => response.data)
.then(({ data }) => {
if (data.length) {
updateSearchState(() =>
data.map((row, index) => ({
name: row.title,
value: index,
data: row,
}))
);
} else {
updateSearchState(() => ({ name: "", value: "", data: "" }));
}
//return items.map(({title}) => ({ value: 'hello', name:title }))
})
.catch((error) => {})
.finally(() => {});
// return new Promise((resolve, reject) => {
// fetch(`https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${query}`)
// .then(response => response.json())
// .then(({ drinks }) => {
// resolve(drinks.map(({ idDrink, strDrink }) => ({ value: idDrink, name: strDrink })))
// })
// .catch(reject);
// });
}}
placeholder="Search"
search
// onChange={setTitle}
onChange={handleSearch}
// onChange={onChange}
emptyMessage={emptyMessage}
// value='helllo'
value={
searchState.length &&
searchState.find((obj) => obj.value === selectedValue)
}
/>
</div>
);
}
export default ReactSelectSearch;
To implement a React Select search with live data fetching, you can use a library like **react-select**
along with the **axios**
library to make HTTP requests.
Here's an example:
- Install the
**react-select**
and**axios**
libraries:
npm install react-select axios
- Import the required libraries in your React component:
import React, { useState, useEffect } from 'react';
import Select from 'react-select';
import axios from 'axios';
- Define a state for the selected option and an array for the options:
const [selectedOption, setSelectedOption] = useState(null);
const [options, setOptions] = useState([]);
- Use the
**useEffect**
hook to fetch the data from the API and update the options state:
useEffect(() => {
axios.get('https://api.example.com/data')
.then(res => setOptions(res.data.map(item => ({ value: item.id, label: item.name }))))
.catch(err => console.error(err));
}, []);
- Render the
**Select**
component and pass the options and selected option state:
return (
<Select
value={selectedOption}
onChange={setSelectedOption}
options={options}
/>
);
By following these steps, you should have a working React Select search with live data fetching. The **useEffect**
hook is used to fetch the data from the API when the component mounts and update the **options**
state. The **Select**
component is rendered with the options and selected option state as props, allowing the user to select an option from the list and triggering updates to the selected option state.
@abcd 1 days ago
Aquí los que apoyamos a Los del limit desde sus inicios..