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>;
}
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>
);
}
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..
}
}
...
}