FieldSelect component from Sharetribe documents is giving me a string, while FieldCheckbox is returning a JSON object.
In a specific scenario, I want FieldSelect to store a JSON object. How can I achieve this?
Below is the code snippet for reference:
I'm new to REACT and would greatly appreciate if someone could explain why this behavior is occurring.
Code Implementation
<FieldSelect
name={subGroupCategoryKey}
id={subGroupCategoryKey}
label={categoryLabel}
>
{relevantSubGroupCategoryOptions.map(c => (
<option key={c.key} value={c.key}>
{c.label}
</option>
))}
</FieldSelect>
FieldSelect
import React from 'react';
import PropTypes from 'prop-types';
import { Field } from 'react-final-form';
import classNames from 'classnames';
import { ValidationError } from '../../components';
import css from './FieldSelect.module.css';
const FieldSelectComponent = props => {
const { rootClassName, className, id, label, input, meta, children, ...rest } = props;
if (label && !id) {
throw new Error('id required when a label is given');
}
const { valid, invalid, touched, error } = meta;
// Display error message and input styles only if field has been touched and validation failed.
const hasError = touched && invalid && error;
const selectClasses = classNames(css.select, {
[css.selectSuccess]: valid,
[css.selectError]: hasError,
});
const selectProps = { className: selectClasses, id, ...input, ...rest };
const classes = classNames(rootClassName || css.root, className);
return (
<div className={classes}>
{label ? <label htmlFor={id}>{label}</label> : null}
<select {...selectProps}>{children}</select>
<ValidationError fieldMeta={meta} />
</div>
);
};
// Default props and prop types definition
...
const FieldSelect = props => {
return <Field component={FieldSelectComponent} {...props} />;
};
export default FieldSelect;
FieldCheckbox
import React from 'react';
import { node, string } from 'prop-types';
import classNames from 'classnames';
import { Field } from 'react-final-form';
import css from './FieldCheckbox.module.css';
const IconCheckbox = props => {
const { className, checkedClassName, boxClassName } = props;
return (
<SVG >
</svg>
);
};
// Default props and prop types definition
...
const FieldCheckboxComponent = props => {
const {
rootClassName,
className,
svgClassName,
textClassName,
id,
label,
useSuccessColor,
onChange: handleChange,
...rest
} = props;
const classes = classNames(rootClassName || css.root, className);
const handleOnChange = (input, event) => {
const { onBlur, onChange } = input;
onChange(event);
onBlur(event);
handleChange && handleChange(event);
};
// Rendering checkbox with label
...
return (
<span className={classes}>
...
);
};
// Default props and prop types definition
...
export default FieldCheckboxComponent;