We Keep Coding

How to use Formik's handleChange multiple times to change the same value?

I use Material-UI and Formik. I want that two input fields can edit a single value. In this case there is a TextField and a Slider and both of those inputs should allow to change the value for the perdiod. When I give both input fields the same id I get the following error message, which I kinda expected: Formik cannot determine which value to update
But is there a way to do that with Formik or do I need to write a custom handleChange function?
const formik = useFormik({
initialValues: {
period: 5,
},
<OutlinedInput
id="period"
name="period"
type="period"
onChange={formik.handleChange}
value={formik.values.period}
/>
<Slider
value={formik.values.period}
aria-label="Default"
min={0}
max={20}
id="period"
onChange={formik.handleChange}
/>

dont give them the same id ,
but give them the same name

Can't set 'touched' to true

I just trying to create a custom Formik <Field />. It is a <input type = file /> with opacity=0 and depending of values i styling my <Error /> component and <input type = text />. values.photo is ok. The problem is that touched never becoming true, so i can't show my <Error /> component. Can you explain what goes wrong?
https://codesandbox.io/s/purple-violet-qgxr3?file=/src/components/FileInput.js

in your file input component just add this:
form.setTouched({...form.touched,[field.name]: true });
setTouched take object of fields and field.name is the file input name.

when you handle the file input by listening to onChange event.
As soon as that onChange method is called you can mark your field asTouched by calling
.markAsTouched() so that it would show the error if the condition in validated.

Select All checkbox not behaving as expected

I'm trying to write this custom React component for my main Formik react form.
I want to create a 'select All' checkbox that, when selected or unselected, selects or deselects all the other checkboxes.
I got it to recognize that I'm clicking the 'Select All' checkbox using the onChange event.
But when I do this, it always stays selected.
I am also not sure how to automatically select and deselect the other checkboxes.
Another thing is, this component doesn't use state because state is handled by Formik in my my form page. Formik just looks for which checkbox is checked and adds it to state.
Is there a way to do this?
Thanks!
Here is my code:
const EngineList = () => {
const handleEngineChange = (e) => {
console.log('set engines to All -- ', e);
}
return (
<>
<label>
<Field type="checkbox" name="engines" onChange={handleEngineChange} value="1" selected />
Select All
</label>
<label>
<Field type="checkbox" name="engines" value="2" />
Formula One
</label>
<label>
<Field type="checkbox" name="engines" value="3" />
Nascar
</label>
</>
);
}
export default EngineList;

Since Formik handles state, you have to use the API to change state. There's setFieldValue, which you can use.

How do I set a default value on a semantic ui react dropdown

I have a Semantic UI React Dropdown Form.Field I am trying to set a default value of English how can I do this?
<Form.Field
name="languageSkills"
label=""
placeholder="Language"
value={this.state.reviewerSearch.languageSkills['English']}
onChange={this.handleSearchFilterChange}
category={'languages'}
control={LookupDropdown}
fluid
multiple
search
selection
/>

I think you are looking for defaultValue,
<Form.Field
name="languageSkills"
label=""
placeholder="Language"
defaultValue={this.state.reviewerSearch.languageSkills['English']}
onChange={this.handleSearchFilterChange}
category={'languages'}
control={LookupDropdown}
fluid
multiple
search
selection
/>

ReactJS: How to put <input/> inside a Material UI's <TextField/>?

I am trying to make <TextField/> (http://www.material-ui.com/#/components/text-field) as <input/>. So I attempted the following:
<TextField
hintText='Enter username'
>
<input
className="form-control"
ref='username'
type='text'
/>
</TextField>
But it is not picking up the ref correctly. When this.refs.username.value.trim() is logged, it displays an error that value is undefined. But when <input/> is used alone, it picks up the inputted text correctly.
What is the proper the way to use <input/> but with <TextField/> as wrapper for styling?
Thank you in advance!

I don't think you can have an input field inside a TextField component

Material UI's TextField Is An Input So all You need to do is add another TextField Below it add styling if you want them closer
you couldnt do <input><input></input></input> in normal HTML.
<TextField hintText="Hint" name="Name" fullWidth={true} onChange={this.handleChange} />
you just need a handle change function which you should be able to work out from googling if you need one.