I'm a shadcn ui and react newbie, just tell me why the value of branch and year state variables won't update. I'm not using zod and react-hook-form.
import React, { useState } from "react";
import { Button } from '../components/ui/button'
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import { Label } from "@/components/ui/label"
export default function CreateProfile() {
const [fileName, setFileName] = useState(""); // State to store the selected file name
const [branch, setBranch] = useState('cse'); // State to store the selected branch
const [year, setYear] = useState('2nd'); // State to store the selected year
const handleSubmit = async (e) => {
e.preventDefault();
// Add the logic to save the data to the database
console.log({ fileName, branch, year });
}
return (
<>
<section className='bg-[#09090b] min-h-screen p-12 flex-col flex items-center justify-center'>
<h1 className="text-4xl font-bold text-white capitalize scroll-m-20 lg:text-5xl">
Welcome Priyanshu! Now Create Your Profile
</h1>
<h4 className="mt-5 text-xl tracking-tight text-white scroll-m-20">
This is what viewers will see when they click on your profile through leaderboard. You can edit this information at any time.
</h4>
<form className="w-full max-w-4xl mt-8 sm:mt-16" onSubmit={handleSubmit}>
<div className='flex flex-col md:flex-row md:gap-x-6'>
<div className='md:w-1/2'>
<div className="max-w-md">
<div className="flex flex-col items-center justify-center px-6 py-8 border border-gray-400 border-dashed rounded-lg">
<svg className="w-12 h-12 mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
<p className="mb-4 text-lg text-center text-gray-600">Drag & drop your resume here</p>
<p className="mb-4 text-sm text-center text-gray-500">or</p>
{/* Input element to select file */}
<input
type="file"
className="hidden"
id="fileInput"
onChange={(e) => setFileName(e.target.files[0].name)}
/>
<label htmlFor="fileInput" className="px-4 py-2 font-bold text-white transition duration-300 ease-in-out bg-blue-500 rounded-lg cursor-pointer hover:bg-blue-600">Browse files</label>
{/* Display the selected file name */}
{fileName && (
<p className="mt-4 text-sm text-center text-gray-500">Selected file: {fileName}</p>
)}
</div>
</div>
</div>
<div className='mt-8 md:w-1/2 md:mt-0'>
<div className="mb-6">
<Label htmlFor="branch" className="text-white">Select your branch</Label>
<Select id="branch" value={branch} onChange={(e) => setBranch(e.target.value)}>
<SelectTrigger className="text-white">
<SelectValue value="cse" placeholder="Computer science engineering" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="cse">Computer science engineering</SelectItem>
<SelectItem value="etc">Electronics & telecommunication</SelectItem>
<SelectItem value="mech">Mechanical Engineering</SelectItem>
<SelectItem value="civil">Civil Engineering</SelectItem>
<SelectItem value="elec">Electrical Engineering</SelectItem>
<SelectItem value="other">Other</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<div className="mb-6">
<Label htmlFor="year" className="text-white">Select current year</Label>
<Select id="year" value={year} onChange={(e) => setYear(e.target.value)}>
<SelectTrigger className="w-full text-white">
<SelectValue placeholder="Second" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="1st">First</SelectItem>
<SelectItem value="2nd">Second</SelectItem>
<SelectItem value="3rd">Third</SelectItem>
<SelectItem value="4th">Fourth</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<div className='flex items-center justify-center mt-8 sm:mt-12'>
<Button>Save & proceed</Button>
</div>
</div>
</div>
</form>
</section>
</>
)
}
I tried asking chatGPT and Gemini and it wont work, in the documentation they've used zod and react-hook-form but I don't want to use them. I'm so confused please help...
shadcn is build above radix
"Select" is not a normal html tag it a "radix" component
defaultValue={branch} instead of value={branch}
and
onValueChange={value=> setBranch(value)} instead of onChange={(e) => setBranch(e.target.value)}
that simple
for more https://www.radix-ui.com/primitives/docs/components/select#api-reference