GET XmlHttpRequest example REACT

App.jsx

import {useState} from 'react';

const apiKey = '50059311-67b92461e0c6542f48deaee0e';

function App() {
    const [query, setQuery] = useState('nature');
    const [imageType, setImageType] = useState('photo');
    const [results, setResults] = useState([]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');

    const searchImages = () => {
        setLoading(true);
        setError('');
        setResults([]);

        const url = `https://pixabay.com/api/?key=${apiKey}&q=${encodeURIComponent(query)}&image_type=${imageType}&per_page=5`;

        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);

        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                setLoading(false);
                if (xhr.status === 200) {
                    try {
                        const data = JSON.parse(xhr.responseText);
                        if (data.hits && data.hits.length > 0) {
                            setResults(data.hits);
                        } else {
                            setError('Изображения не найдены');
                        }
                    } catch (err) {
                        setError('Ошибка при обработке ответа' + err);
                    }
                } else {
                    setError(`Ошибка: ${xhr.status} ${xhr.statusText}`);
                }
            }
        };

        xhr.onerror = () => {
            setLoading(false);
            setError('Ошибка сети');
        };

        xhr.send();
    };

    return (
        <div style={{padding: '2rem', textAlign: 'center', backgroundColor: '#121212', color: '#ffffff'}}>
            <h1>Поиск изображений на Pixabay (XMLHttpRequest)</h1>
            <input
                type="text"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Введите запрос (например, 'nature')"
                size="70"
                style={{padding: '0.5rem', margin: '0.5rem', borderRadius: '5px', border: 'none'}}
            />
            <select
                value={imageType}
                onChange={(e) => setImageType(e.target.value)}
                style={{padding: '0.5rem', borderRadius: '5px', margin: '0.5rem'}}
            >
                <option value="photo">Фото</option>
                <option value="illustration">Иллюстрация</option>
                <option value="vector">Вектор</option>
            </select>
            <br/>
            <button
                onClick={searchImages}
                style={{
                    padding: '0.5rem',
                    margin: '0.5rem',
                    borderRadius: '5px',
                    border: 'none',
                    backgroundColor: '#1db954',
                    color: '#ffffff',
                    cursor: 'pointer',
                }}
            >
                Найти изображения
            </button>
            <div>
                {loading && <p>Поиск...</p>}
                {error && <p>{error}</p>}
                {results.map((image) => (
                    <div key={image.id} style={{margin: '1rem 0'}}>
                        <p>
                            <strong>{image.user}</strong> (Теги: {image.tags})
                        </p>
                        <img
                            src={image.webformatURL}
                            alt={image.tags}
                            style={{maxWidth: '100%', height: 'auto', borderRadius: '10px', marginTop: '1rem'}}
                        />
                    </div>
                ))}
            </div>
        </div>
    );
}

export default App;