CODEWITHSUNDEEP
javascriptreactjscheckboxmaterial-ui
ChrisH
ChrisH

Reputation: 29

how to pass data as true on check Checkbox for React Material-UI using React Hooks

<FormControlLabel onChange={handleCurrentProjectChange} value="end" control={<Checkbox style={{ color: "#C8102E" }} />} label={
                          <Typography style={{ fontSize: 15 }}>
                            Check if project "In Progress"
                          </Typography>
                        }
                        labelPlacement="end"

So here is my Checkbox from Material-UI and I want to create a const bool that allows me to send the data for if the checkbox is checked it sends as "true". I know I need to add a check={ } prop inside of the FormControl but I do not know how to call it.

const HandleProgressCheckbox = (project_in_progress) => {
    setProgressCheckbox({currentProject.project_in_progress ? true : false}),
  };

I tried to get started but this I could be totally wrong. Btw, the checkbox has a label of "project_in_progress". Sorry for my bad explanation skills I hope this is understandable. Help please.

Upvotes: 0

Views: 2174

Answers (1)

Aleksandr Kurilov
Aleksandr Kurilov

Reputation: 341

In my case, I did this:

...
const {isPublic, isBuzy} = this.props;
    
<FormControlLabel
    control={ 
        <Checkbox
            onChange={this.handleChangeIsPublic}
            name='isPublic'
            checked={isPublic}
            disabled={isBuzy} /> }
        label="Is public?"
/>
...

and implementing handleChangeIsPublic:

handleChangeIsPublic = (e) => {
    const isChecked = e.target.checked;

    const { dispatch } = this.props;
    dispatch(actions.setPublicState(isChecked));
}

I am using "redux" in my project, if you only need to do this with one "reactjs" then you need something like:

handleChangeIsPublic = (e) => {
    const isChecked = e.target.checked;

    this.setState({
        isPublic: isChecked ? true : false,
    });
}

Upd:

I modified your version to use hooks, and this is what happened:

import React, { useState, useEffect } from 'react';

import Checkbox from '@material-ui/core/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Typography from '@material-ui/core/Typography';

export default function ProjectInProgress() {
    const [inProgress, setInProgress] = useState(false);

    function handleInProgressChange(e) {
        setInProgress(e.target.checked);
    }

    useEffect(() => {
        if (inProgress === true) {
            alert(`inProgress is ${inProgress}`);
        }
    });

    return (
        <FormControlLabel
            value = "end"
            control = {
                        <Checkbox
                            onChange={handleInProgressChange}
                            checked={inProgress}
                            style={{ color: "#C8102E" }} />}
                            label={
                                    <Typography style={{ fontSize: 15 }}>
                                        Check if project "In Progress"
                                    </Typography>}
            labelPlacement="end"
        />
    )
}

I hope I could help you.

Upvotes: 1

Related Questions