Can you help me figure out why I am unable to access the districts property in regions object?
const regions = [ { region: "Hlavní město Praha", districts: "Benešov, Beroun, Kladno, Kolín, Kutná Hora, Mělník, Mladá Boleslav, Nymburk, Praha-východ, Praha-západ, Příbram a Rakovník", }, ];
console.log(regions.filter((r) => r.region === regionState)[0].districts)
I'm encountering an error that says
Uncaught TypeError: Cannot read properties of undefined (reading 'districts')
import React, { useState } from "react";
import { Form, Card, Button } from "react-bootstrap";
import validator from "validator";
const StepOne = ({ nextStep, handleFormData, values }) => {
const [error, setError] = useState(false);
const [regionState, setRegionState] = useState("");
const regions = [
{
region: "Hlavní město Praha",
districts:
"Benešov, Beroun, Kladno, Kolín, Kutná Hora, Mělník, Mladá Boleslav, Nymburk, Praha-východ, Praha-západ, Příbram a Rakovník",
},
];
const twoCalls = (e) => {
handleFormData("region");
setRegionState(e.target.value);
};
console.log(regions.filter((r) => r.region === regionState))
const submitFormData = (e) => {
e.preventDefault();
if (
validator.isEmpty(values.propertyType) ||
validator.isEmpty(values.region) ||
validator.isEmpty(values.district)
) {
setError(true);
} else {
nextStep();
}
};
return (
<div>
<Card style={{ marginTop: 100 }}>
<Card.Body>
<Form onSubmit={submitFormData}>
<Form.Group className="mb-3">
<Form.Label>Property Type</Form.Label>
<Form.Select
style={{ border: error ? "2px solid red" : "" }}
onChange={handleFormData("propertyType")}
>
{" "}
<option>Select Property Type</option>
<option value="House">House</option>
<option value="Apartment">Apartment</option>
<option value="Land">Land</option>
</Form.Select>
{error ? (
<Form.Text style={{ color: "red" }}>
This field is required
</Form.Text>
) : (
""
)}
</Form.Group>
<Form.Group className="mb-3">
<Form.Label>Region</Form.Label>
<Form.Select
style={{ border: error ? "2px solid red" : "" }}
onChange={twoCalls}
>
{" "}
<option>Select Region</option>
{regions.map((region) => (
<option value={region.region}>{region.region}</option>
))}
</Form.Select>
{error ? (
<Form.Text style={{ color: "red" }}>
This field is required
</Form.Text>
) : (
""
)}
</Form.Group>
<Form.Group className="mb-3">
<Form.Label>District</Form.Label>
<Form.Select
style={{ border: error ? "2px solid red" : "" }}
onChange={handleFormData("district")}
>
{" "}
<option>Select District</option>
</Form.Select>
{error ? (
<Form.Text style={{ color: "red" }}>
This field is required
</Form.Text>
) : (
""
)}
</Form.Group>
<Button variant="primary" type="submit">
Continue
</Button>
</Form>
</Card.Body>
</Card>
</div>
);
};
export default StepOne;