I am working on a NextKs app, currently working on a component that has a form. Some of the key/value pair on the form are nested (please see the code below). I was under the impression that I can traverse down element on the form, but somehow getting errors
import React from "react";
const Rafce = () => {
const [formData, setFormData] = useState({
title: "",
objectives: "",
demographic: {
geographic: {
country: "",
state: "",
city: "",
},
target: "",
gender: "",
age: "",
intention: "",
},
campaignReason: "",
strategy: "",
});
const items = [
"Item 1",
"Item 2",
"Item 3",
"Item 4",
];
const profession = ["Yes|No", "Yes", "No"];
//Handling Country selection
const [countries, setCountries] = useState([]);
const [states, setStates] = useState([]);
const [cities, setCities] = useState([]);
const [selectedCountry, setSelectedCountry] = useState("");
const [selectedState, setSelectedState] = useState("");
const [selectedCity, setSelectedCity] = useState("");
useEffect(() => {
setCountries(Country.getAllCountries());
}, []);
useEffect(() => {
if (selectedCountry) {
setStates(State.getStatesOfCountry(selectedCountry));
setCities([]); // Reset cities when country changes
}
}, [selectedCountry]);
useEffect(() => {
if (selectedState) {
setCities(City.getCitiesOfState(selectedCountry, selectedState));
}
}, [selectedState, selectedCountry]);
const handleCountryChange = (event) => {
setSelectedCountry(event.target.value);
setSelectedState("");
setSelectedCity("");
};
const handleStateChange = (event) => {
setSelectedState(event.target.value);
setSelectedCity("");
};
const handleCityChange = (event) => {
setSelectedCity(event.target.value);
};
const handleChange = (event) => {
const { name, value } = event.target;
setFormData({
...formData,
[name]: value,
});
};
return (<div>
<form onSubmit={handleSubmit}>
<div className="space-y-12">
<div className="grid grid-cols-1 gap-x-8 gap-y-10 border-b border-gray-900/10 pb-12 md:grid-cols-3">
<div>
<h2 className="text-base font-semibold leading-7 text-gray-900">
Some Name
</h2>
</div>
<div className="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6 md:col-span-2">
<div className="col-span-full">
<label
htmlFor="title"
className="block text-sm font-medium leading-6 text-gray-900"
>
Company Title
</label>
<div className="mt-2">
<div className="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-red-600 sm:max-w-md">
<input
type="text"
name="title"
id="title"
value={formData.title}
onChange={handleChange}
className="block flex-1 w-full border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
placeholder="Your organization name"
/>
</div>
</div>
</div>
<div className="relative inline-block text-left z-50 col-span-full">
<select
value={selectedItem}
onChange={(e) => setSelectedItem(e.target.value)}
>
<option value="Select Type" disabled>
Select Type
</option>
{items.map((item, index) => (
<option key={index} value={item}>
{item}
</option>
))}
</select>
</div>
<div className="col-span-full">
<label
htmlFor="objectives"
className="block text-sm font-medium leading-6 text-gray-900"
>
Objectives
</label>
<div className="mt-2">
<textarea
id="objectives"
name="objectives"
value={formData.objectives}
onChange={handleChange}
rows={3}
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-red-600 sm:text-sm sm:leading-6"
defaultValue={""}
placeholder="What are the specific goals of the campaign beyond just raising funds? (e.g., increasing awareness, engaging new donors)"
/>
</div>
</div>
<div className="col-span-full">
<label
htmlFor="features"
className="block text-sm font-medium leading-6 text-gray-900"
>
Defining demographics
</label>
<div className="mt-2">
<div className="isolate -space-y-px rounded-md shadow-sm">
<div className="relative rounded-md rounded-t-none px-3 pb-1.5 pt-2.5 ring-1 ring-inset ring-gray-300 focus-within:z-10 focus-within:ring-2 focus-within:ring-red-600">
<label
htmlFor="feature02"
className="block text-xs font-medium text-gray-900"
>
Geographic location
</label>
<div className="mb-3">
<label
className="block text-xs font-medium text-gray-900"
htmlFor="country"
>
Country:{" "}
</label>
<select
id="country"
value={selectedCountry}
onChange={handleCountryChange}
>
<option
className="block text-xs font-medium text-gray-900"
value=""
>
Select Country
</option>
{countries.map((country) => (
<option key={country.isoCode} value={country.isoCode}>
{country.name}
</option>
))}
</select>
</div>
{states.length > 0 && (
<div className="mb-3">
<label
className="block text-xs font-medium text-gray-900"
htmlFor="state"
>
State:{" "}
</label>
<select
id="state"
value={selectedState}
onChange={handleStateChange}
>
<option
className="block text-xs font-medium text-gray-900"
value=""
>
Select State/Region
</option>
{states.map((state) => (
<option key={state.isoCode} value={state.isoCode}>
{state.name}
</option>
))}
</select>
</div>
)}
{cities.length > 0 && (
<div className="mb-3">
<label
className="block text-xs font-medium text-gray-900"
htmlFor="city"
>
City:{" "}
</label>
<select
id="city"
value={selectedCity}
onChange={handleCityChange}
>
<option
className="block text-xs font-medium text-gray-900"
value=""
>
Select City
</option>
{cities.map((city) => (
<option key={city.name} value={city.name}>
{city.name}
</option>
))}
</select>
</div>
)}
</div>
<div className="relative rounded-md rounded-t-none px-3 pb-1.5 pt-2.5 ring-1 ring-inset ring-gray-300 focus-within:z-10 focus-within:ring-2 focus-within:ring-red-600">
<label
htmlFor="target"
className="block text-xs font-medium text-gray-900"
>
Target
</label>
<input
type="text"
name="target"
id="target"
value={formData.demographic.target}
onChange={handleChange}
className="block w-full border-0 p-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
placeholder="e.g: Gen Z, Baby Boomers, Gen X"
/>
</div>
<div className="relative rounded-md rounded-t-none px-3 pb-1.5 pt-2.5 ring-1 ring-inset ring-gray-300 focus-within:z-10 focus-within:ring-2 focus-within:ring-red-600">
<label
htmlFor="gender"
className="block text-xs font-medium text-gray-900"
>
Gender
</label>
<input
type="text"
name="gender"
id="gender"
value={formData.demographic.gender}
onChange={handleChange}
className="block w-full border-0 p-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
placeholder="E.g: 'Male' or 'Female' "
/>
</div>
<div className="relative rounded-md rounded-t-none px-3 pb-1.5 pt-2.5 ring-1 ring-inset ring-gray-300 focus-within:z-10 focus-within:ring-2 focus-within:ring-red-600">
<label
htmlFor="age"
className="block text-xs font-medium text-gray-900"
>
Age
</label>
<input
type="text"
name="age"
id="age"
value={formData.demographic.age}
onChange={handleChange}
className="block w-full border-0 p-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
placeholder="e.g: 20-64"
/>
</div>
<div className="relative rounded-md rounded-b-none px-3 pb-1.5 pt-2.5 ring-1 ring-inset ring-gray-300 focus-within:z-10 focus-within:ring-2 focus-within:ring-red-600">
<label
htmlFor="intention"
className="block text-xs font-medium text-gray-900"
>
Intention
</label>
<input
type="text"
name="intention"
value={formData.demographic.intention}
onChange={handleChange}
id="intention"
className="block w-full border-0 p-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
placeholder="e.g: Events"
/>
</div>
</div>
</div>
</div>
<div className="col-span-full">
<label
htmlFor="features"
className="block text-sm font-medium leading-6 text-gray-900"
>
Strategy
</label>
<div className="mt-2">
<div className="isolate -space-y-px rounded-md shadow-sm">
<div className="relative rounded-md rounded-b-none px-3 pb-1.5 pt-2.5 ring-1 ring-inset ring-gray-300 focus-within:z-10 focus-within:ring-2 focus-within:ring-red-600">
<label
htmlFor="feature01"
className="block text-xs font-medium text-gray-900"
>
What strategies have you tried
</label>
<div className="flex justify-between">
<Select
label=""
placeholder="Click to Select (multiple if needed)"
selectionMode="multiple"
className="bg-white"
>
{strategies.map((selection) => (
<SelectItem className="bg-white" key={selection.key}>
{selection.label}
</SelectItem>
))}
</Select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="mt-6 flex items-center justify-end gap-x-6">
<button
type="submit"
className="rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
>
Save and Continue
</button>
</div>
</form>
</div>);
};
export default Rafce;
The issue is that nested elements (e.g: demographic) are not showing in the UI – As if I never set the event target value. Also, the Select bitton elements that are supposed to be a simple Yes/No aren’t showing