I have a working React component with Formik with initialValues and everything else works perfectly except for the radio box below.
The radio box is not selectable, what could be the bug?
<Field
name="accountPurpose"
render={({ field }) => (
<>
<div className="radio-item">
<input
{...field}
id="all"
value="all"
checked={field.value === "all"}
name="type"
type="radio"
/>
<label htmlFor="all"> All</label>
</div>
<div className="radio-item">
<input
{...field}
id="distribution"
value="distribution"
name="type"
checked={field.value === "distribution"}
type="radio"
/>
<label htmlFor="distribution">
Distribution
</label>
</div>
<div className="radio-item">
<input
{...field}
id="redemption"
value="redemption"
name="type"
checked={field.value === "redemption"}
type="radio"
/>
<label htmlFor="redemption">
{" "}
Redemption
</label>
</div>
</>
)}
/>
Remove checked={field.value ===...} from all inputs and use defaultChecked for just one.
like below
<input
id="all"
value="all"
name="type"
type="radio"
defaultChecked
{...field}
/>
Related
<form className='confession-form' onSubmit={this.handleSubmit}>
<div className="form-group">
<div className="select-box">
<div className={this.state.selectOptionActive ? 'options-container active' : 'options-container'}>
<div className="option" onClick={this.selectOption}>
<input type="radio" name="category" id="dream" className="cat-radio" />
<label htmlFor="dream">Dream</label>
</div>
<div className='option' onClick={this.selectOption}>
<input type="radio" name="category" id="guilt" className="cat-radio" />
<label htmlFor="guilt">Guilt</label>
</div>
<div className='option' onClick={this.selectOption}>
<input type="radio" name="category" id="pain" className="cat-radio" />
<label htmlFor="pain">Pain</label>
</div>
<div className="option" onClick={this.selectOption}>
<input type="radio" name="category" id="wild" className="cat-radio" />
<label htmlFor="wild">Wild</label>
</div>
<div className="option" onClick={this.selectOption}>
<input type="radio" name="category" id="regret" className="cat-radio" />
<label htmlFor="regret">Regret</label>
</div>
<div className="option" onClick={this.selectOption}>
<input type="radio" name="category" id="fantasy" className="cat-radio" />
<label htmlFor="fantasy">Fantasy</label>
</div>
<div className="option" onClick={this.selectOption}>
<input type="radio" name="category" id="other" className="cat-radio" />
<label htmlFor="other">Other</label>
</div>
</div>
<div className="selected" onClick={() => this.setState({selectOptionActive: !this.state.selectOptionActive})}>
{
this.state.optionSelected ? (
this.state.optionSelected
) : (
'Select Category'
)
}
<span className={this.state.selectOptionActive ? 'mdi mdi-chevron-up' : 'mdi mdi-chevron-down'}></span>
</div>
</div>
</div>
<textarea name="confession" id="confession" className='confession-body' placeholder='What is your confession?'></textarea>
<ReCAPTCHA className="recaptcha" sitekey={process.env.REACT_APP_SITE_KEY} size="normal" />
<button className='btn-confess'>Confess</button>
i have this react class compenet with a react-google-recaptcha
if i keep refreshing it sometimes the recaptcha doesn't show up.
and also if a navigate to my form page from home page then back to home then back to form page again it recaptcha doesnt show up and also i check the inspect element the component recaptcha is only (empty div with a class recaptcha)
I am trying to build a very simple form structured with (ideally) a set of radio buttons, a set of checkbox and then another set of radio buttons. These are three different sections of the form I am trying to build.
I would like to keep the current form but I want the two set of radio buttons to be completely independent. First I am not sure they are with the current structure of the code. Second, for some reason, I can pick one option in the first set of radio buttons but the second set seems to be disabled (I can't pick neither long-running nor event-driven).
How can I achieve that? Thanks.
import React, { Component } from "react";
class App extends Component {
constructor() {
super();
this.state = {
customer: "individualDev",
programmingmodel: "long-running",
isWebService: false,
isBatchJob: false,
isAiMl: false,
isDatabase: false,
isWorker: false,
};
}
onValChange = (event) => {
this.setState({
customer: event.target.value,
});
};
onCheckValChange = (e) => {
this.setState({ [e.target.name]: e.target.checked });
};
onSubmitForm = (event) => {
event.preventDefault();
console.log("state", this.state);
};
render() {
return (
<div className="App">
<form onSubmit={this.onSubmitForm}>
<br/>
<b> Customer segment </b>
<br/>
<br/>
<label>
<input
type="radio"
value="IndividualDev"
checked={this.state.customer === "IndividualDev"}
onChange={this.onValChange}
/>
<span>Individual Dev </span>
</label>
<label>
<input
type="radio"
value="Startup"
checked={this.state.customer === "Startup"}
onChange={this.onValChange}
/>
<span>Startup </span>
</label>
<label>
<input
type="radio"
value="smallBusiness"
checked={this.state.customer === "smallBusiness"}
onChange={this.onValChange}
/>
<span>Small Business </span>
</label>
<label>
<input
type="radio"
value="mediumBusiness"
checked={this.state.customer === "mediumBusiness"}
onChange={this.onValChange}
/>
<span>Medium Business </span>
</label>
<label>
<input
type="radio"
value="enterpriseIt"
checked={this.state.customer === "enterpriseIt"}
onChange={this.onValChange}
/>
<span>Enterprise IT </span>
</label>
<label>
<input
type="radio"
value="enterpriseLob"
checked={this.state.customer === "enterpriseLob"}
onChange={this.onValChange}
/>
<span>Enterprise LOB </span>
</label>
<br/>
<br/>
<br/>
<b> Workload </b>
<br/>
<br/>
<label>
<input
type="checkbox"
name="isWebService"
checked={this.state.isWebService}
onChange={this.onCheckValChange}
/>
<span>Web Service </span>
</label>
<label>
<input
type="checkbox"
name="isBatchJob"
checked={this.state.isBatchJob}
onChange={this.onCheckValChange}
/>
<span>Batch Job </span>
</label>
<label>
<input
type="checkbox"
name="isWorker"
checked={this.state.isWorker}
onChange={this.onCheckValChange}
/>
<span>Worker </span>
</label>
<label>
<input
type="checkbox"
name="isAiMl"
checked={this.state.isAiMl}
onChange={this.onCheckValChange}
/>
<span>AI/ML </span>
</label>
<label>
<input
type="checkbox"
name="isDatabase"
checked={this.state.isDatabase}
onChange={this.onCheckValChange}
/>
<span>Database </span>
</label>
<br/>
<br/>
<br/>
<b> Programming model </b>
<br/>
<br/>
<label>
<input
type="radio"
name="long-running"
checked={this.state.programmingmodel === 'long-running'}
onChange={this.onValChange}
/>
<span>Long-running </span>
</label>
<label>
<input
type="radio"
name="event-driven"
checked={this.state.programmingmodel === 'event-driven'}
onChange={this.onValChange}
/>
<span>Event-driven </span>
</label>
<br/>
<br/>
<br/>
<br/>
<button type="submit">Submit</button>
</form>
</div>
);
}
}
export default App;
You should use the same logic that you have already implemented in the checkboxes. Set a name attribute to the radio button and set your state by the [event.target.name]: event.target.value method. Like so:
import React, { Component } from "react";
class App extends Component {
constructor() {
super();
this.state = {
customer: "individualDev",
programmingmodel: "long-running",
isWebService: false,
isBatchJob: false,
isAiMl: false,
isDatabase: false,
isWorker: false,
};
}
onValChange = (event) => {
this.setState({
[event.target.name]: event.target.value,
});
};
onCheckValChange = (e) => {
this.setState({ [e.target.name]: e.target.checked });
};
onSubmitForm = (event) => {
event.preventDefault();
console.log("state", this.state);
};
render() {
return (
<div className="App">
<form onSubmit={this.onSubmitForm}>
<br/>
<b> Customer segment </b>
<br/>
<br/>
<label>
<input
type="radio"
value="IndividualDev"
name="customer"
checked={this.state.customer === "IndividualDev"}
onChange={this.onValChange}
/>
<span>Individual Dev </span>
</label>
<label>
<input
type="radio"
value="Startup"
name="customer"
checked={this.state.customer === "Startup"}
onChange={this.onValChange}
/>
<span>Startup </span>
</label>
<label>
<input
type="radio"
value="smallBusiness"
name="customer"
checked={this.state.customer === "smallBusiness"}
onChange={this.onValChange}
/>
<span>Small Business </span>
</label>
<label>
<input
type="radio"
value="mediumBusiness"
name="customer"
checked={this.state.customer === "mediumBusiness"}
onChange={this.onValChange}
/>
<span>Medium Business </span>
</label>
<label>
<input
type="radio"
value="enterpriseIt"
name="customer"
checked={this.state.customer === "enterpriseIt"}
onChange={this.onValChange}
/>
<span>Enterprise IT </span>
</label>
<label>
<input
type="radio"
value="enterpriseLob"
name="customer"
checked={this.state.customer === "enterpriseLob"}
onChange={this.onValChange}
/>
<span>Enterprise LOB </span>
</label>
<br/>
<br/>
<br/>
<b> Workload </b>
<br/>
<br/>
<label>
<input
type="checkbox"
name="isWebService"
checked={this.state.isWebService}
onChange={this.onCheckValChange}
/>
<span>Web Service </span>
</label>
<label>
<input
type="checkbox"
name="isBatchJob"
checked={this.state.isBatchJob}
onChange={this.onCheckValChange}
/>
<span>Batch Job </span>
</label>
<label>
<input
type="checkbox"
name="isWorker"
checked={this.state.isWorker}
onChange={this.onCheckValChange}
/>
<span>Worker </span>
</label>
<label>
<input
type="checkbox"
name="isAiMl"
checked={this.state.isAiMl}
onChange={this.onCheckValChange}
/>
<span>AI/ML </span>
</label>
<label>
<input
type="checkbox"
name="isDatabase"
checked={this.state.isDatabase}
onChange={this.onCheckValChange}
/>
<span>Database </span>
</label>
<br/>
<br/>
<br/>
<b> Programming model </b>
<br/>
<br/>
<label>
<input
type="radio"
name="programmingmodel"
value="long-running"
checked={this.state.programmingmodel === 'long-running'}
onChange={this.onValChange}
/>
<span>Long-running </span>
</label>
<label>
<input
type="radio"
name="programmingmodel"
value="event-driven"
checked={this.state.programmingmodel === 'event-driven'}
onChange={this.onValChange}
/>
<span>Event-driven </span>
</label>
<br/>
<br/>
<br/>
<br/>
<button type="submit">Submit</button>
</form>
</div>
);
}
}
export default App;
I want to show a select tag when a checkbox is checked.
In "/register" route (which is the default route), checkbox should be unchecked by default and in "/register/tradeUser", checkbox should be checked by default.
If I use defaultChecked="true", the state of checked will not change to true.
So I want to know, how can I call setChecked(true) inside the conditional rendering?
const Register = (match) => {
const [checked, setChecked] = useState(false);
const toggleChecked = () => {
if (checked) {
setChecked(false);
} else {
setChecked(true);
}
};
return (
<form>
<input type="text" name="first-name" placeholder="First Name" />
<input type="text" name="last-name" placeholder="Last Name" />
<input type="email" name="email" placeholder="Email Address" />
<input type="password" name="password" placeholder="Password" />
<input type="password" name="confirm" placeholder="Confirm Password" />
{match.location.pathname === "/register/tradeUser" ? (
<div>
<label>
<input
type="checkbox"
name="profession"
checked={checked}
onChange={() => toggleChecked()}
/>
I am an Architect/Interior designer
</label>
<select
name="info"
placeholder="Select Option to add Architect Info"
className={`${checked ? "" : "hidden"}`}
>
<option value="certi-number">Certificate Number</option>
<option value="certificate">Registration Certificate</option>
</select>
</div>
) : (
<div>
<label>
<input
type="checkbox"
name="profession"
checked={checked}
onChange={() => toggleChecked()}
/>
I am an Architect/Interior designer
</label>
<select
name="info"
placeholder="Select Option to add Architect Info"
className={`${checked ? "" : "hidden"}`}
>
<option value="certi-number">Certificate Number</option>
<option value="certificate">Registration Certificate</option>
</select>
</div>
)}
<button>Register</button>
</form>
<label>
Existing User?
<Link to="/login" className="link">
{" Login "}
</Link>
</label>
</div>
);
};
you can easily run function in jsx like this
export default function App() {
return (
<div className="App">
{console.log(1)}
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
however you shouldn't set state in jsx because it will loop infinitely
in this case you can use useEffect
useEffect(()=>{
if(match.location.pathname=== "/register/tradeUser"){
setChecked(true)
}else{
setChecked(false)
}
},[match.location.pathname])
I have a form written in Formik. I need to show/hide a 'text' field depending on the value (option) selected of the 'select' field. How can I achieve this?
<Formik
initialValues={{transactionCategory, name}}
onSubmit={this.onSubmit}
validateOnChange={false}
validateOnBlur={false}
validate={this.validate}
enableReinitialize={true}
>
{(props) => (
<Form>
<fieldset className="form-group">
<label>Category</label>
<Field name="transactionCategory" component="select">
<option value="Admission">Admission</option>
<option value="Class_Fee">Class Fee</option>
<option value="Staff_Payment">Staff Payment</option>
<option value="Other">Other</option>
</Field>
</fieldset>
<fieldset className="form-group">
<label>Name</label>
<Field className="form-control" type="text" name="name"/>
</fieldset>
<button className="btn btn-success" type="submit">Save</button>
<button type="reset" className="btn btn-secondary">Reset</button>
</Form>
)}
</Formik>
When I select the value 'Other' from the 'Category' options, the 'Name' field should be hidden.
Conditionally render name field by using transactionCategory value
<Formik
initialValues={{ transactionCategory, name }}
onSubmit={this.onSubmit}
validateOnChange={false}
validateOnBlur={false}
validate={this.validate}
enableReinitialize={true}
>
{props => (
<Form>
<fieldset className="form-group">
<label>Category</label>
<Field name="transactionCategory" component="select">
<option value="Admission">Admission</option>
<option value="Class_Fee">Class Fee</option>
<option value="Staff_Payment">Staff Payment</option>
<option value="Other">Other</option>
</Field>
</fieldset>
{props.values.transactionCategory !== "Other" && (
<fieldset className="form-group">
<label>Name</label>
<Field className="form-control" type="text" name="name" />
</fieldset>
)}
<button className="btn btn-success" type="submit">
Save
</button>
<button type="reset" className="btn btn-secondary">
Reset
</button>
</Form>
)}
</Formik>;
write onSelect/onchange event of option and based on the Option's selected value. Update the state field.
this.setState({isName:true})
now you can use this.state.isName in condition rendering to show and hide the field.
Disclaimer: New to development and this is my first s/o post.
I'm using materialize on a react project with a filter that has checkboxes. I currently have the checkbox component returning as:
return (
<div className={this.props.type} >
<form>
<input
type={this.props.type}
value={label}
checked={isChecked}
onChange={(e) => this.toggleCheckboxChange(e)}
/>
<label>
<input
type={this.props.type}
value={label}
checked={isChecked}
onChange={(e) => this.toggleCheckboxChange(e)}
/>
{label}
</label>
</form>
</div>
)
It renders with the checkbox and the label next to it. However, if I remove the input tag that's outside of the label tag like so:
return (
<div className={this.props.type} >
<form>
<label>
<input
type={this.props.type}
value={label}
checked={isChecked}
onChange={(e) => this.toggleCheckboxChange(e)}
/>
{label}
</label>
</form>
</div>
)
the checkbox disappears but the text is still clickable. The component is class based so it maintains its state of being checked or unchecked.
Any ideas as to why it behaves this way?
Problem fixed! Turns out I needed an ID on my input field that matched and htmlFor property on my label field. See below code for the fix:
<div className={this.props.type} >
<form>
<input
id={label[0]}
type={this.props.type}
value={label}
checked={isChecked}
onChange={(e) => this.toggleCheckboxChange(e)}
/>
<label htmlFor={label[0]}>
{label}
</label>
</form>
</div>