import { Input, Box, Text, Divider, Button } from '@chakra-ui/react';
import { useState } from 'react';
export default function GithubSearchApp() {
const [username, setUsername] = useState('');
const [data, setData] = useState({});
async function handleGithubSearch() {
await fetch('/api/github', {
method: 'POST',
body: JSON.stringify(username),
})
.then((response) => response.json())
.then((data) => setData(data));
console.log(data);
}
function handleUsername(e) {
setUsername(e.target.value);
}
return (
<Box>
<Text fontSize="lg"> Search for GitHub Repositories!</Text>
<Divider />
<Input
placeholder="Enter a GitHub username"
onChange={handleUsername}
value={username}
/>
<Button
colorScheme="telegram"
position="fixed"
ml="3px"
onClick={handleGithubSearch}
>
Submit
</Button>
{data ? <h1> {data.login}</h1> : null}
</Box>
);
}
Hello, I'm encountering an issue with my GitHub search app. The data is only fetched after the second click when submitting a username. I'm puzzled as to why this delay occurs.