Hi,
I have a form with an address textarea which I conditionally render depending if a user selects the ‘delivery’ option otherwise this textarea remains hidden.
The form works fine for all other fields but when the ‘address’ field renders it fails to send the target name or value.
My website form can be found at the bottom of this page: https://gatsby-pickedorganic.netlify.app/veg-boxes/
Troubleshooting I’ve done:
-
Using the React Chrome add-on I am able to see that state is being updated for ‘address’ name and value. But not when submitted the fields are not present.
props new prop : "" state email "hello@gmail.com" frequency "weekly" isValidated false message "Hello!" name "My Name" phone "5654654654" size "Large" showAddress true transport "delivery" address "123 Any Road" rendered by react-dom@16.13.1 -
I have also tested without any conditional rendering and the address textarea content submits fine. So the issue I believe lies in how ‘this.state’ (form values) are handled on submit for the conditional rendered elements. I’m new to React so likely missing something obvious maybe?
Here is the code used to conditionally show ‘address’ field when the ‘delivery’ option is selected.
state = {
showAddress: false
};
showAddress(event) {
if (event.target.value === "delivery") {
this.setState({ showAddress: true });
} else {
this.setState({ showAddress: false });
}
}
And I am using a ternary operator for conditionally rendering the ‘address’ element when showAddress equals ‘true’.
{this.state.showAddress ? (
<>
<div className="field">
<label className="label" htmlFor={"address"}>
Delivery Address
</label>
<sub>(£1.50 charge)</sub>
<div className="control">
<textarea
name={"address"}
className="textarea"
id={"address"}
type={"textarea"}
onChange={(this.handleChange}
required={true}
placeholder={"delivery address"}
/>
</div>
</div>
</>
) : null}
I appreciate any help you are able to give.
Kind Regards
Chris
