Handling multiple checkboxes in react-CodePudding

I want to click on multiple checkboxes in my react component and to handle which checkboxes are checked. i want to confirm when click on 'Verify' that name and address are checked by passing the checked state of each checkbox. can someone help me in that?

export class Form extends React.Component<FormProps, {
  ...,
  isChecked?: boolean
}> {

  constructor(props: FormProps) {
    super(props);

    this.state = {
      ...,
      isChecked:false
    };
    private checkField = () => {
    console.log('state is ' this.state.isChecked) 
     }
  }
  }
render() {
  return<Fragment>   
 <Input name="Name" required={true} handleChecked={(isChecked: boolean) => this.setState({isChecked})} />
 <Input name="Address" required={true} handleChecked={(isChecked: boolean) => this.setState({isChecked})} />
 <Input name="Birthdate" />
<div onClick={this.checkField}> Verify</div>
</Fragment>
  }
}

export function Input(props: React.PropsWithChildren<{name: string, required?: boolean, handleChecked?: (checked: boolean) => void}>) {
 
  const [isChecked, setIsChecked] = useState(false)
  
  return <Fragment>
    <div>
      {props.name}
      <label htmlFor={props.name}>Selection {props.required ? '(Required)': ''}</label>
      <input 
        id={props.name} 
        type='checkbox'
        name={props.name}
        checked={isChecked}
        onChange={
          setIsChecked(!isChecked)
          if(props.handleChecked) {
            props.handleChecked(!isChecked);
            }
          }
        }/>
    </div>
  </Fragment>;
}

CodePudding user response：

As mentioned in the comment section, you need to create separate state for name and address checkbox value and pass it to the <Input> component.

class Wrapper extends Component {
  state = {
   isNameChecked: false,
   isAddressChecked: false,
  }

  render() {
   <Input
     name="Name"
     required={true}
     handleChecked={(isNameChecked: boolean) => this.setState({ isNameChecked })}
     isChecked={this.state.isNameChecked}
   />

   <Input
     name="Address"
     required={true}
     handleChecked={(isAddressChecked: boolean) => this.setState({ isAddressChecked })}
     isChecked={this.state.isAddressChecked}
   />

   <Input name="Birthdate" />
  }
}

export function Input(props: React.PropsWithChildren<{
 name: string,
 required?: boolean,
 handleChecked?: (checked: boolean) => void,
 isChecked: boolean,
}>) {
  return (
   <div>
      {props.name}
      <label htmlFor={props.name}>Selection {props.required ? '(Required)': ''}</label>
      <input 
        id={props.name} 
        type='checkbox'
        name={props.name}
        checked={isChecked}
        onChange={
          if (props.handleChecked) {
              props.handleChecked(!isChecked);
          }
        }
     }/>
    </div>
);
}

CodePudding user response：

Can go about this in a few different ways..
I would suggest something like this:

interface State = {
  name: boolean;
  address: boolean;
}

class Wrapper extends Component {
  state: Readonly<State> = {
    name: false,
    address: false,
  }

  handleChecked = e => {
     setState({
       [e.target.name]: e.target.checked
     })
  }

  render() {
    <Input
      name="name"
      required
      handleChecked={handleChecked}
    />
    <Input
      name="address"
      required
      handleChecked={handleChecked}
    />
  }
}

function Child({ 
  name,
  handleChecked
}: { 
  name: string;
  handleChecked: (e: ChangeEvent<HTMLInputElement>) => void;
}) {
  return (
     <input 
        ...
        type='checkbox'
        name={name}
        onChange={handleChecked}
     />
  )
}

Then you could handle things based on the parent's state.
i.e. -

class Wrapper extends Component {
  ...

  foo = () => {
    if (state.name && state.email) {
       // do whatever..
    }
  }

  ...
}