Validation in Custom Field for a Boolen Field in react-jsonschema-form

Question

I am using react-jsonschema-form to build a multi step form in React. One of the requirements is to use material-ui Toggle Buttons for boolean field. I was able to create a custom field but not sure how the validations work in this case. Even after selecting a value I get boolean value required validation message.

Here is the custom field code:

export default function BooleanToggle(props: any) {
  const [booleanResponse, setBoolenResponse] = useState(null);

  const handleSelection = (event: any, response: any) => {
    setBoolenResponse(response);
  }

  return (
    <div>
      <ToggleButtonGroup exclusive value={booleanResponse} onChange={handleSelection}>
        <ToggleButton value={true} aria-label="Yes">
          <div>Yes</div>
        </ToggleButton>
        <ToggleButton value={false} aria-label="No">
          <div>No</div>
        </ToggleButton>
      </ToggleButtonGroup>
    </div>
  );
}

Schema:

{
   "title":"Test title",
   "type": "boolean"
}

uiSchema:

{
    "ui:field" : "BToggle"
}

fields:

{
    BToggle : BooleanToggle
}

How can I add value from this field to formData so that the validation is taken care?

Answer 1

There is a onChange property in in the props BooleanToggle(props: any)

in your handler just call onChange(value) to write fromData

const {onChange} = props;
const handleSelection = (event: any, response: any) => {
    setBoolenResponse(response);
    onChange(response); // your value for formData
  }