Nextjs yazarken bir yerde takılı kaldım. Free API ile deneme amaçlı kripto dönüştürücü yapıyorum. Para birimini seçerken arama kısmına harf giremiyorum, bir harfe bastığımda alttaki seçeneklere gidiyor.

'use client';
import axios from 'axios';
import React, { useEffect, useState } from 'react';
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import ListSubheader from '@mui/material/ListSubheader';
import TextField from '@mui/material/TextField';
function Home() {
    const [data, setData] = useState([]);
    const [filteredData, setFilteredData] = useState([]);
    const [fromCurrency, setFromCurrency] = useState('');
    const [searchQuery, setSearchQuery] = useState('');
    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get("https://api.coinlore.net/api/tickers/");
                const fetchedData = response.data?.data || [];
                setData(fetchedData);
                setFilteredData(fetchedData);
                if (fetchedData.length > 0) {
                    const btc = fetchedData.find((coin) => coin.symbol === "BTC");
                    if (btc) {
                        setFromCurrency(btc.price_usd.toString());
                    }
                }
            } catch (error) {
                console.error("Veri çekim hatası:", error);
            }
        };
        fetchData();
    }, []);
    const handleSearch = (event) => {
        const query = event.target.value;
        setSearchQuery(query);
        const filtered = data.filter((coin) =>
            coin.name.toLowerCase().includes(query.toLowerCase()) ||
            coin.symbol.toLowerCase().includes(query.toLowerCase())
        );
        setFilteredData(filtered);
    };
    return (
        <div>
            <div className="container">
                <Box sx={{ minWidth: 120 }}>
                    <FormControl sx={{ m: 5, minWidth: 150 }}>
                        <InputLabel id="from-currency-label">From:</InputLabel>
                        <Select
                            labelId="from-currency-label"
                            id="from-currency"
                            value={fromCurrency}
                            label="Coin From"
                            onChange={(e) => setFromCurrency(e.target.value)}
                        >
                            <ListSubheader>
                                <TextField
                                    size="small"
                                    placeholder="Ara..."
                                    fullWidth
                                    value={searchQuery}
                                    onChange={handleSearch}
                                    onKeyDown={(event) => event.stopPropagation()} // Varsayılan davranışı engelle
                                    autoFocus
                                />
                            </ListSubheader>
                            {searchQuery.length > 0 ? (
                                filteredData.map((coin) => (
                                    <MenuItem value={coin.price_usd} key={coin.id}>
                                        {coin.name} ({coin.symbol})
                                    </MenuItem>
                                ))
                            ) : data?.map((coin) => {
                                return (
                                    <MenuItem value={coin.price_usd} key={coin.id}>{coin.name}</MenuItem>
                                );
                            })}
                        </Select>
                    </FormControl>
                </Box>
            </div>
        </div>
    );
}
export default Home;