I'm trying to prefill ReactQuill which is editable, but it throws me the following error
Screenshot of Error
Unhandled Runtime Error
Error: You are passing the delta object from the onchange event back as value. You most probably want editor.getContents() instead. see https://github.com/zenoamaro/react-quill
I tried changing value & onChange properties to different values but of no use. Can Someone pls help me ?
<ReactQuill
id="description"
name="description"
theme="snow"
modules={modules}
formats={formats}
placeholder="Describe your content"
value = {description}
defaultValue = {description}
onChange={setDescription}
className={classes.quillHeight}
/>
Related
I am using Formik forms in react project. I have the following code inside <Formik><Form>
<Field name="zip" validate={some validation is here}>
<input {...fieldProps.field}
id="zip"
name="zip"
className="form-control"
placeholder="zip"
required={true}
maxLength={5}
onKeyDown={(event) => this.onZipChange(event)}/>
</Field>
<ErrorMessage name="zip" render={msg => <div>{msg}</div>} />
When form is rendered, I make changes to the input, for example, remove one number from zip, so in props.formProps.errors errors` texts appear, but ErrorMessage is not displaying. After I click to any places of the page it appears, and then it continue working as expected: on key down it display ErrorMessage if any errors in zip, and hide if zip is valid.
The problem is only for the first time when form is rendered.
Any ideas, what can cause the issue?
This is expected behavior. <ErrorMessage /> is only displayed when both of the following conditions are fulfilled:
There is an error message for the given field
That field's touched property is true
By default, Formik will set touched to true on blur. So this is why the error message only displays when you click outside the input.
If you want to force the error message to appear even before the blur, you may manually set the input's touched property to true. This may be done multiple ways but the simplest is via initialTouched prop on <Formik />. If the form comes preloaded with data from the backend, you may also want to set validateOnMount prop to true.
For example:
<Formik
validateOnMount
initialTouched={{zip: true}}
>
...
</Formik>
I am trying to receive the files uploaded in the ant design upload component using the onCHange event but I keep encountering an error
"Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'files')".
The code:
<Form.Item>
<Form.Item name="dragger" valuePropName="fileList" noStyle>
<Upload.Dragger // onChange={(e)=> handleInputChange("file", e.target.files[0])}
beforeUpload={() => false}
name="files"
accept=".apng,.avif,.gif,.jpg,.jpeg,.jfif,.pjpeg,.pjp,.png,.svg,.webp"
action=""
>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="text-dark">Click or drag file to this area to upload</p>
<p className="text-muted">Support for PNG, JPG, GIF up to 10MB.</p>
</Upload.Dragger>
</Form.Item>
</Form.Item>
I intend to manipulate the file in a function. I don't want to use the ant design upload component's upload functionality. I only wanted the drag and drop UI.
The solution:
ant-design doesn't return the usual event object but it's own object. The object has another object called file which would have suited my code.
Therefore, I should have used: e.file instead of e.target.files[0]
That solves the error!
I have been working on a form and been using Formik. For some reason all the props like errors and values are being passed but touched is not working. I am assuming that touched is not properly set up but I am unsure what would be causing it. I currently have this:
<Formik
initialValues={{date: ''}}
validation={{date: Yup.string().required('some error')}}
onSubmit={(values) => { console.log(values) }}
>
{({ errors, touched, values, setFieldValue }) => {
<form onSubmit={handleSubmit}>
...
<DatePicker
id="date"
name="date"
value={values.date}
errors={errors.date}
touched={touched.date}
onChange={setFieldValue}
/>
<button type='submit'>Submit</button>
</form>
}}
</Formik>
I have been checking the prop values being sent in and the only thing that is not working is touched as it is undefined. Did I configure the date picker incorrectly here? I am getting everything else and I am able to set the value but touched is never set. I have other fields similar to this as well but is working fine. What could be causing this issue?
I managed to fix this by passing the handleBlur handler to the DatePicker component
onBlur={handleBlur}
The DatePicker is in a wrapper component and although the error message is displaying correctly but it isn't invalidate the field or form if the date is set as incorrect. I know about the onError callback function but I don't know what to call here. The validation is not occuring on onSubmit hence can't use the SubmissionError or submitfailed.
I can pass an external validator from form field but I just leave it as a last option.
Date Picker
<InlineDatePicker
format={DATE_FORMAT_UI}
keyboard
mask={mask}
maxDate={maxDate}
minDate={minDate}
placeholder={DATE_FORMAT_UI}
value={formattedStoreValue}
variant="outlined"
onBlur={this.handleBlur}
onChange={this.handleChange}
**onError={(_,error)=>{ don't know what to do here })}**
{...other}
/>
Form Field
<Field
name={someDate}
component={InlineDatePickerField}
**validate={[required]} //If not possible then add another validator here as last option**
id={someDate}
label="To"
minDate={this.minDate()}
required
className="w-full"
/>
I want to have two simple input boxes.
There is a loginName input box, and a password input box.
Currently I map the value of these two input box into a "state".
Now, using NativeBase. How do I dynamically show "success" "error" like how they did in the demo?
http://nativebase.io/docs/v0.5.9/components#successInputTextbox
Passing a prop success is equivalent to passing success={true}
So if you have state variables like inputSuccess and inputError, you can do this:
<InputGroup
iconRight
success={this.state.inputSuccess ? true : false}
error={this.state.inputError ? true : false}>
<Icon name='ios-checkmark-circle' style={{color:'#00C497'}}/>
<Input placeholder='Textbox'/>
</InputGroup>
The Native Base documentation (version 2.12) has this example:
state = { error: 'Some error' };
// ...
<Content>
<Item error={this.state.error !== ''}>
<Input
placeholder='Textbox with Error Input'
error={'#d50000'}
/>
<Icon name='close-circle' />
</Item>
</Content>
The error prop inside <Input /> is to set the error color. The invalid state is set at the item error prop.
Base don Himanshu answer.
There is no need to set false, that's the default value for success and error.
Additionally, you can also can also use conditions to change de icon!
<InputGroup
iconRight
success={this.state.inputSuccess}
error={this.state.inputError}>
<Icon name={this.state.inputSuccess ? 'checkmark-circle' : 'close-circle'}/>
<Input placeholder='Textbox'/>
</InputGroup>