lundi 14 septembre 2020

My react Form Input checkbox wont check and uncheck

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">&lt;</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