1

I want to make it necessary to mark the React js checkbox component. I want to show warning icon when Checkbox is not selected. How can I do that? I shared the component I wrote below.

React checkbox component

const CheckBox = ({
  question,
  formKey,
  valid = true,
  validationError = 'Field is required',
}) => {

  const dispatch = useDispatch()
  const reduxValue = useSelector(state => state.app.forms.f3[formKey].value)
  const isSaved = useSelector(state => state.app.forms.f3[formKey].saved)

  const [input, setInput] = useState({
    value: reduxValue,
    valid: true,
  })

  return (
    <>
      <Row>
        <Col className="col-1">
          <label className="orange-checkbox-container">
            <input
              type="checkbox"
              name={formKey}
              onChange={(e) => changeSelected(e)}
              checked={input.value}
            />
            <span className="checkmark"></span>
          </label>
        </Col>
        <Col className="col-11">
          <p>{question}</p>
        </Col>
      </Row>
      <div
        className="invalid-feedback"
        style={{
          width: '8rem',
        }}
      >
        {validationError}
      </div>
    </>
  );
}

2 Answers 2

0

I will improve on Han's answer. You should hide the whole div if there the checkbox was selected. I improved how the onChange works and separated states. Using hooks you can separate your state values rather than the approach used in classes where you have 1 object this.state = {} to manage the whole state of that component.

const CheckBox = ({
  question,
  formKey,
  // valid = true,
  validationError = 'Field is required',
}) => {
  const dispatch = useDispatch();
  const reduxValue = useSelector(state => state.app.forms.f3[formKey].value);
  const isSaved = useSelector(state => state.app.forms.f3[formKey].saved);
  const [checked, setChecked] = useState(reduxValue);
  const [valid, setValid] = useState(true);

  const handleCheckedChange = event => {
    setChecked(event.target.checked);
  }

  return (
    <>
      <Row>
        <Col className="col-1">
          <label className="orange-checkbox-container">
            <input
              type="checkbox"
              name={formKey}
              onChange={handleCheckedChange}
              checked={checked}
            />
            <span className="checkmark"></span>
          </label>
        </Col>
        <Col className="col-11">
          <p>{question}</p>
        </Col>
      </Row>
      {!checked &&
        <div
          className="invalid-feedback"
          style={{
            width: '8rem',
          }}
        >
          {validationError}
        </div>
      }
    </>
  );
}
0

First you should declare the initial state of valid to false and display validationError if input.value is false I assume your onChange is changing the input.value.

const [input, setInput] = useState({
        value: reduxValue,
        valid: false,
    })


    <div
        className='invalid-feedback'
        style={{
            width: '8rem',
        }}
    >
        {!input.value && validationError}
    </div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.