Import { func } from 'prop-types' import React, { useEffect, useState

Question

Import { func } from 'prop-types' import React, { useEffect, useState

} from 'react'
import Cards from './Cards'
const baseUrl = 'https://api.github.com'
const path = '/search/repositories?q='
const styles = {
btn: {
// width: '10rem',
height: '3rem',
// borderRadius: '1rem',
// display: 'block'
borderRadius: '1rem',
display: 'block',
},
input: {
display: 'block',
},
}

export default function Searcher() {
const [error, setError] = useState(null)
const [isLoaded, setIsLoaded] = useState(false)
const [items, setItems] = useState([])
const [text, setText] = useState()

function GetSearchText(text) {
try {
fetch(baseUrl + path + text)
.then(res => res.json())
.then(
result => {
setIsLoaded(true)
setItems(result)
},
error => {
setIsLoaded(true)
setError(error)
}
)
} catch (error) {
console.log(error.message)
}
}

return (
<div className='row'>
<input
style={styles.input}
className='form-control col-lg-4'
placeholder='Поиск репозитории'
value={text}
onChange={event => setText(event.currentTarget.value)}
></input>
<button className='btn-lorge col-lg-8' style={styles.btn} onClick={() => GetSearchText(text)}>
Найти
</button>
</div>
)
}