Develop Reference

method is not getting called on onChange event in formik react

I have to call below method using formik
const handleChange = async (e:any, values: any) => {
alert(e.target.value);
alert(values);
alert('Method called');
};
below is formik code.
<Formik initialValues={formInitialSchema}
validationSchema={formValidationSchema}
onSubmit={handleSubmit}>
<Form>
<div className="col-md-4">
<label htmlFor="protoColNo">Protocol No</label>
<Field
id="protoColNo"
className="form-control"
name="protoColNo"
placeholder="Enter the Protocol No"
/>
<p className="text-danger">
<ErrorMessage name="protoColNo" />
</p>
</div>
<div className="col-md-4">
<label htmlFor="activerequests">Active Requests</label>
<select
name="activeRequest"
style={{ display: 'block' }}
onChange= {(e)=>handleChange}>
<option value="No" >No </option>
<option value="Yes" >Yes</option>
<option value="All" selected>All </option>
</select>
<p className="text-danger">
<ErrorMessage name="activerequests" />
</p>
</div>
</div>
</Form>
</Formik>
I have one input filed and one drop down. As soon as user change the value of drop down I need to call handleChange method with the value of input filed and list. but method is not getting called. I dont know what wrong I am doing?
can you please help me with the same?

onChange= {(e)=>handleChange(e)}> //you forgot to call the handleChange
OR
onChange={handleChange}

You need to call the anonymous function inside the onChange event.
Use the following code :
onChange= {(e)=>handleChange(e)}

Set autocomplete off for Formik field

To set the autocomplete off for a simple input it must be done like this: <input type="text" autocomplete="off">
In this case, there is a Formik Field and the input looks like this:
<Field
className="my-class"
name="myValues"
as={Input}
placeholder="Write something"
/>
and it seems that adding autocomplte="off" doesn't work in this case:
<Field
className="my-class"
name="myValues"
as={Input}
placeholder="Write something"
autocomplete="off"
/>
Any ideas?

Solution: camelCase.
Instead of autocomplete='off', use autoComplete='off'.

I am not sure where you are doing wrong. You can simply do this:
<label>
<Field name="picked" value="One" autocomplete="off" />
One
</label>
According to doc if you don't pass anything it will treat as a input
Here is the demo:https://codesandbox.io/s/happy-khayyam-9mdll?file=/index.js

<Field
name="password"
type="password"
component={() =>
<input
className="form-control"
type="password"
autoComplete="new-password"
/>
}
/>

How to fix Checkbox bug?

Whenever I try to click the checkbox on the page it doesn't check the actual box. I know this is something wrong in my ReactJS but I don't know what I am doing wrong. Can you possibly help?
I have tried researching answers on stack and other websites but have turned up with nothing.
class Description extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false,
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
render() {
return (
<form>
<label>
<input
name="Checking Account"
type="checkbox"
checked={this.state.checked}
onChange={this.handleInputChange} />
Checking Account
</label>
<label>
<input
name="Savings Account"
type="checkbox"
checked={this.state.checked}
onChange={this.handleInputChange} />
Savings Account
</label>
<label>
<input
name="CDs/Money Market Accounts"
type="checkbox"
checked={this.state.checked}
onChange={this.handleInputChange} />
CDs/Money Market Accounts
</label>
<br />
<label>
<input
name="Student Banking"
type="checkbox"
checked={this.state.checked}
onChange={this.handleInputChange} />
Student Banking
</label>
<label>
<input
name="Auto Loans"
type="checkbox"
checked={this.state.checked}
onChange={this.handleInputChange} />
Auto Loans
</label>
<label>
<input
name="Home Equity"
type="checkbox"
checked={this.state.checked}
onChange={this.handleInputChange} />
Home Equity
</label>
<br />
<label>
<input
name="Mortgage"
type="checkbox"
checked={this.state.checked}
onChange={this.handleInputChange} />
Mortgage
</label>
<label>
<input
name="Student Loans"
type="checkbox"
checked={this.state.checked}
onChange={this.handleInputChange} />
Student Loans
</label>
<label>
<input
name="Saving for Retirement"
type="checkbox"
checked={this.state.checked}
onChange={this.handleInputChange} />
Saving for Retirement
</label>
<br />
<label>
<input
name="Investment Account"
type="checkbox"
checked={this.state.checked}
onChange={this.handleInputChange} />
Investment Account
</label>
<label>
<input
name="Credit Card"
type="checkbox"
checked={this.state.checked}
onChange={this.handleInputChange} />
Credit Card
</label>
<label>
<input
name="Other"
type="checkbox"
checked={this.state.checked}
onChange={this.handleInputChange} />
Other
</label>
</form>
);
}
}
ReactDOM.render(
<Description/>,
document.getElementById('checkbox')
);
I would like for the program to be able to check the box by the end of this!

Here is one example for Student Banking
Change name Student Banking to studentBanking
Change this.state.checked to this.state.studentBanking
Change
<input
name="Student Banking"
type="checkbox"
checked={this.state.checked}
onChange={this.handleInputChange} />
To
<input
name="studentBanking"
type="checkbox"
checked={this.state.studentBanking}
onChange={this.handleInputChange} />
Do the same for other input checkboxes as well

You need to set the checked state value using setState in your onChange event.
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
checked: value
});
}

That is because you are setting state as { "Credit Card": true } when clicking on Credit Card. What you can do is just set the values accordingly.
I have a simple demo using your code itself.

You are setting the State correctly but the check isn't working because of the way the checked is bound.
please change
checked={this.state.checked}
to
checked={this.state.StudentBanking}
also, remove the space in your names
<input
name="CheckingAccount"
type="checkbox"
checked={this.state.CheckingAccount}
onChange={this.handleInputChange} />

How to edit a Form in Redux?

I am new to Redux. I've learned React and trying to learn Redux. I am building a todo app with Redux. I am managed to create, read and delete todos, but I am not managed to edit the todo.
My code: AddTodoForm
<FormGroup>
<Label for="title">Title</Label>
<Input type="text" name="title" id="title" placeholder="Enter Title" onChange={this.handleChange.bind(this)} /> {/* <input type="text" value={this.state.value} onChange={this.handleChange.bind(this, 'title')} /> */}
</FormGroup>
<FormGroup>
<Label for="description">Description </Label>
<Input type="textarea" name="description" id="description" onChange={this.handleChange.bind(this)} />
</FormGroup>
<FormGroup>
<div>
<CustomInput className="toggleInput" type="checkbox" data-toggle="toggle" id="exampleCustomCheckbox" label="Do You want to add Reminder??" onChange={this.toggle.bind(this, !this.state.checkBoxToggle)} />
</div>
</FormGroup>
{this.state.checkBoxToggle ?
<FormGroup>
<Label for="reminder">Reminder </Label>
<Input type="datetime-local" name="date" defaultValue={moment(Date.now()).format( 'YYYY-MM-DDTHH:mm')} id="date" onChange={this.handleChange.bind(this)} />
</FormGroup>
: ''}
<FormGroup check row>
<Col className="text-center">
<Button className="btn btn-success" onClick={this.handleSubmit.bind(this)}>Submit</Button>
</Col>
</FormGroup>
My handleChange function, where I set states of input:
handleChange(e) {
console.log(e.target.value, e.target.name);
if (e.target.name == "date") {
console.log('date is', e.target.value, new Date(e.target.value).valueOf());
this.setState({
[e.target.name]: new Date(e.target.value).valueOf()
})
} else {
this.setState({
[e.target.name]: e.target.value
})
}
}
This the render list function, where I want to edit my todo, but I am not able to edit the todo. I am able to delete, but not edit:
renderList() {
if (this.props.todos) {
return _.map(this.props.todos, (todo, id) => {
return (
<tr key={id + 1}>
<th scope="row">{id + 1}</th>
<td><Input type="text" disabled name="title" id="title" value={todo.title} onChange={this.handleChange.bind(this)} /></td>
<td><Input type="textarea" value={todo.description ? todo.description : this.state.description} name="description" id="description" onChange={this.handleChange.bind(this)} /></td>
<td>{todo.reminder}</td>
<td> <button className='btn btn-danger' onClick={this.onDeleteClick.bind(this, todo._id)}>Delete</button></td>
<td><button className='btn btn-success' onClick={this.markCompleted.bind(this, todo._id)}>Mark Complete</button></td>
</tr>
);
})
}
}
The specific todo, which I want to edit doesn't allow to type any value in the input box. I am not able to set it. Please let me know where I am doing wrong.

Don't reinvent the wheel. Instead of trying to reimplement form state, with event handlers, slice and reducers, use Redux Form.
It is made for that specific purpose and has an elegant, efficient API.

Why we need to put e.target.name in square brackets []? [duplicate]

This question already has answers here:
Understanding computed properties (square brackets)
(3 answers)
What do square brackets around a property name in an object literal mean?
(2 answers)
Closed 4 years ago.
Why when I use form elements I got to put e.target.name in brackets?
Here's my code :
onChange (e) {
this.setState({ *[e.target.name]* : e.target.value});
}
(...)
<div>
<label htmlFor=""> Title : </label>
<input type="text" name="title" onChange={this.onChange} value={this.state.title} />
</div>
</form>

This is to dynamically update object property (when the name of the property is unknown upfront but runtime). This way you could have multiple React inputs having a different name property and using the same onChange handler to update part of the state.
Related to this.
Instead of this:
<input type="text" name="title" onChange={this.onTitleChange} value={this.state.title} />
<input type="text" name="address" onChange={this.onDescriptionChange} value={this.state.address} />
<input type="text" name="description" onChange={this.onAddressChange} value={this.state.description} />
onTitleChange (e) {
this.setState({ title : e.target.value});
}
onAddressChange (e) {
this.setState({ address : e.target.value});
}
onDescriptionChange (e) {
this.setState({ description : e.target.value});
}
We can write just one handler like you presented:
<input type="text" name="title" onChange={this.onChange} value={this.state.title} />
<input type="text" name="address" onChange={this.onChange} value={this.state.address} />
<input type="text" name="description" onChange={this.onChange} value={this.state.description} />
onChange (e) {
this.setState({ [e.target.name] : e.target.value});
}