Checkbox reactjs with default value

Asked

Viewed 189 times

0

I am working on an application with React, however I am beginner in the subject and found a problem. I want to generate a template to be used later, and the options of this template are optional and selected through a checkbox, everything works, however, I want two options to be permanent, as the checkbox clicked, but I will hide it from the screen. I had thought to make a checkbox clicked by default and display: None;, however, despite being able to make it start clicked, the value does not apply at startup, however if you click on it, the value applies and works, but I do not want that checkbox to even appear. However, this solution seems a bit tricky, there is another way to send the values that the checkbox represents without the checkbox itself being hidden in the page?

Below is the code

import Dbcheckbox2 from 'modules/Checkbox-Checked'

const GenerateTemplateComponent = ({
  handleSubmit,
  handleCancel,
  classes
}) => {
  return (
    <Form
      onSubmit={handleSubmit}
      validate={validate}
      render={({ handleSubmit, invalid, pristine, form: { change } }) => (
        <form className={classes.form} onSubmit={handleSubmit}>
          <PanelBody>
            <Grid container>
              <Grid item xs={12} md={12}>
                <Field
                  name='name'
                  component={DbInputField}
                  required
                  label={<FormattedMessage id='offre-name' />}
                />
              </Grid>
              <Grid container>
                <Grid item xs={6} md={6}>
                  <Field
                    //className={classes.inputCheckbox}
                    name='section'
                    component={DbCheckbox2}
                    type='checkbox'
                    color='primary'
                    label={<FormattedMessage id='offre-section' />}  
                  />
                </Grid>

And the file Checkbox-Checked this way

import React from 'react'

import FormControl from '@material-ui/core/FormControl'
import FormControlLabel from '@material-ui/core/FormControlLabel'
import Checkbox from '@material-ui/core/Checkbox'

const DbCheckbox2 = ({
  label,
  className,
  checked=true,
  value=true,
}) => (
  <FormControl className={className} component="fieldset">
    <FormControlLabel
      control={
        <Checkbox
          checked={checked}
          value={value}
        />
      }
      label={label}
    />
  </FormControl>
)

export default DbCheckbox2
  • Share the code you already have so we can help you more directly.

  • I added, wobble my kkk

1 answer

1


Solved with initialValues inside the form rendering the checkbox.

<Form
  onSubmit={handleSubmit}
  validate={validate}
  initialValues={{
    section: true,
    menus: true
  }}

As you can see in the code posted in the question, right after the validity initialValues was placed, using the name of each field as reference for the value to be true right after loading the component

Browser other questions tagged

You are not signed in. Login or sign up in order to post.