I have here a react form input checkbox. I have an onChange parameter that is setting the target name and value it is very similar to other components set up in the same way. For some reason my checkbox won't check or uncheck. The checkbox does reflect the initial value coming from the db. Can someone show me what Im doing wrong here?
This is the component
<FormGroup check className="mb-3">
<Label check>
<Input
type="checkbox"
checked={editableOrg.enabled}
onChange={() =>
onChange({
target: {
name: "data.enabled",
value: !editableOrg.enabled
}
})
}
/>{" "}
Organization Enabled
</Label>
</FormGroup>
</>
and the parent component
const handleChange = (fieldName) => (event) => {
setEditableOrg({...editableOrg, [fieldName]:event.target.value})
}
return (
<>
{/* {console.log(editableOrg)} */}
<ContentRow>
<h1>
<Link to={"/monitoring-orgs"}>
<Button color="link"><</Button>
</Link>
Edit Organization
</h1>
{/* // need to handle errors */}
{/* <ErrorList errors={errors}/> */}
</ContentRow>
<ContentRow>
<Form>
{/* <Form onSubmit={e => handleFormSubmit(e)}> */}
<OrgForm editableOrg={editableOrg} onChange={handleChange} reportChange={handleReportEmailChange} addEmail={handleAddEmail} removeEmail={handleRemoveEmail}/>
<ButtonToolbar>
<SubmitButton inProgress={props.inProgress}>
Update Organization{" "}
</SubmitButton>
<Button
disabled={props.inProgress}
color="link"
onClick={handleCancel}
>
Cancel
</Button>
</ButtonToolbar>
</Form>
</ContentRow>
</>
);
};
export default connect(mapStateToProps, mapDispatchToProps)(EditOrganization);
Aucun commentaire:
Enregistrer un commentaire