Develop Reference

Fields in Formik (validated on Yup) are constantly displaying an error as if they are empty or invalid. find codesandbox-link attached below

const updateCreateFormField = (e) => {
const { name, value } = e.target;
setCreatForm({
...createForm,
[name]: value,
})
console.log({ name, value });
};
//The onChange variable in the fields is updated on the above code. I am unable to find the solution towards making the below fields function properly. I tried using formik's setFieldValue however It didn't work
const formik = useFormik({
initialValues: {
Name: "",
Address: "",
phoneNumber: "",
Email: "",
}
})
The below code is the return function:
return (<div className="App">
{updateForm._id && (<div>
<h2>Update Customer:</h2>
<Box height={20} />
<Formik initialValues={formik.initialValues}
validationSchema={object({
Name: string().required("Please enter a name").min(3, "Name is too short"),
Address: string().required("Please enter an address").min(3, "Address is too short"),
phoneNumber: number().required("Please enter a phone number").min(4, "Phone number is too short"),
Email: string().required("Please enter an email").email("Invalid email"),
})}
onSubmit={(values, formikHelpers) => {
console.log(values);
formikHelpers.resetForm();
}}
>
{({ errors, isValid, touched, dirty }) => (
<Form onSubmit={updateCustomer}>
<Field name="Name" type="name" as={TextField} variant="outlined" color="primary" label="Name" fullWidth
onChange={handleUpdateFieldChange}
value={updateForm.Name}
error={Boolean(errors.Name) && Boolean(touched.Name)}
helperText={Boolean(touched.Name) && errors.Name}
/>
<Box height={14} />
<Field name="Address" type="Address" as={TextField} variant="outlined" color="primary" label="Address" fullWidth
onChange={handleUpdateFieldChange}
value={updateForm.Address}
error={Boolean(errors.Address) && Boolean(touched.Address)}
helperText={Boolean(touched.Address) && errors.Address}
/>
<Box height={14} />
<Field name="phoneNumber" type="number" as={TextField} variant="outlined" color="primary" label="Phone Number" fullWidth
error={Boolean(errors.phoneNumber) && Boolean(touched.phoneNumber)}
helperText={Boolean(touched.phoneNumber) && errors.phoneNumber}
onChange={handleUpdateFieldChange}
value={updateForm.phoneNumber}
/>
<Box height={14} />
<Field name="Email" type="email" as={TextField} variant="outlined" color="primary" label="Email" fullWidth
error={Boolean(errors.Email) && Boolean(touched.Email)}
helperText={Boolean(touched.Email) && errors.Email}
onChange={handleUpdateFieldChange}
value={updateForm.Email}
/>
<Box height={16} />
<Button type="submit" variant="contained" color="primary" size="large" disabled={!dirty || !isValid} >Update Customer</Button>
</Form>
)}
</Formik>
</div>)}
{!updateForm._id && <div>
<h2>Create Customer:</h2>
<Box height={20} />
<Formik initialValues={formik.initialValues}
validationSchema={object({
Name: string().required("Please enter a name").min(3, "Name is too short"),
Address: string().required("Please enter an address").min(3, "Address is too short"),
phoneNumber: number().required("Please enter a phone number").min(4, "Phone number is too short"),
Email: string().required("Please enter an email").email("Invalid email"),
})}
onSubmit={(values, formikHelpers) => {
console.log(values);
formikHelpers.resetForm();
}}
>
{({ setFieldValue, errors, isValid, touched, dirty,handleBlur,handleSubmit}) => (
<Form onSubmit={createCustomer} >
<Field as={TextField} name="Name" type="name" variant="outlined" color="primary" label="Name" fullWidth
onChange={updateCreateFormField} value={createForm.Name}
error={Boolean(errors.Name) && Boolean(touched.Name)}
helperText={Boolean(touched.Name) && errors.Name}
/>
<Box height={14} />
<Field name="Address" type="Address" as={TextField} variant="outlined" color="primary" label="Address" fullWidth
error={Boolean(errors.Address) && Boolean(touched.Address)}
helperText={Boolean(touched.Address) && errors.Address}
onChange={updateCreateFormField} value={createForm.Address}
/>
<Box height={14} />
<Field name="phoneNumber" type="number" as={TextField} variant="outlined" color="primary" label="Phone Number" fullWidth
error={Boolean(errors.phoneNumber) && Boolean(touched.phoneNumber)}
helperText={Boolean(touched.phoneNumber) && errors.phoneNumber}
onChange={updateCreateFormField}
value={createForm.phoneNumber}
/>
<Box height={14} />
<Field name="Email" type="email" as={TextField} variant="outlined" color="primary" label="Email" fullWidth
error={Boolean(errors.Email) && Boolean(touched.Email)}
helperText={Boolean(touched.Email) && errors.Email}
onChange={updateCreateFormField}
value={createForm.Email}
/>
<Box height={16} />
<Button type="submit" variant="contained" color="primary" size="large" disabled={!dirty || !isValid} >Create Customer</Button>
</Form>
)}
</Formik>
</div>}
<Box height={40} />
</div>
)
Sandbox

Simply use Formik's handleChange event and values. You don't need to create custom functions or states to change values.
Working example here
Also, if you want to have custom function to have inside onChange you can use formik's setFieldValue.
More information related to formik events https://formik.org/docs/api/formik

Facing a problem while Handle an input with React hooks

I try to handle the user's text input with hooks.
const [inputValues, setInputValues] = useState({
firstName:"",
lastName:"",
email:"",
telNum:"",
contactType:"Tel.",
message:"",
agree:false
});
and I try to update the values by
const handleChange = event => {
setInputValues({ ...inputValues, [event.target.name]: event.target.value,});
}
and the event:
onChange={handleChange}
Sample input Field code:
<FormGroup row>
<Label htmlFor='firstname' md={2}>
First Name
</Label>
<Col md={10}>
<Input
type='text'
id='firstname'
name='firstname'
placeholder='First Name'
value={firstName}
valid={errors.firstName === ""}
invalid={errors.firstName !== ""}
onBlur={handleBlur("firstName")}
onChange={handleChange} />
<FormFeedback>{errors.firstName}</FormFeedback>
</Col>
</FormGroup>
But whenever I typed something in the input field. I Can't find the value that I entered un the input field.
I didn't understand what happened here. Please Help me to get out from this

There is a typo error in your code. name property is firstName not firstname.
<FormGroup row>
<Label htmlFor='firstname' md={2}>
First Name
</Label>
<Col md={10}>
<Input
type='text'
id='firstname'
name='firstName'
placeholder='First Name'
value={inputValues.firstName}
valid={errors.firstName === ""}
invalid={errors.firstName !== ""}
onBlur={handleBlur("firstName")}
onChange={handleChange} />
<FormFeedback>{errors.firstName}</FormFeedback>
</Col>
</FormGroup>

replace value to value={inputValues. firstName}

this.setState not updating

I'm trying to take the inputs using a form and update the state when the checkbox is clicked but for some reason, the state doesn't update. It doesn't throw any error. I searched on google for answers but none of them were plausible.
My code:
class PatientForm extends React.Component{
constructor(){
super();
this.state={
patientName: "",
age: null,
sex: "",
email: "",
phoneNo: null
}
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit = (event) => {
console.log(this.state);
const target = event.target;
const value = target.type === "checkbox" ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
alert(this.state.patientName);
console.log(this.state);
}
render(){
return (
<div className="container-fluid">
<Jumbotron>
<h3 className="display-5">Enter Patient info</h3>
<Form>
<Form.Text className="text-muted">
We'll never share your details with anyone else.
</Form.Text>
<Form.Row>
<Col>
<Form.Control name="patientName" type="text" placeholder="Patient name" required/>
</Col>
<Col>
<Form.Control name="age" type="number" placeholder="Patient Age" required/>
</Col>
<Col>
<Form.Control name="sex" type="text" placeholder="Patient Sex" required/>
</Col>
</Form.Row>
<br />
<Form.Group>
<Form.Control name="email" type="email" placeholder="Enter email" required/>
</Form.Group>
<Form.Group>
<Form.Control name="phoneNo" type="number" placeholder="Phone number" required/>
</Form.Group>
<Form.File />
<Form.Label>Patient's Eth Address</Form.Label>
<Form.Text className="text-muted">
################
</Form.Text>
<Form.Group >
<Form.Check
type="checkbox"
label="Tick if the entered info is correct"
onClick = {this.handleSubmit}
/>
</Form.Group>
<Button variant="primary" type="submit" onClick={ () => console.log(this.state)}>
Submit
</Button>
</Form>
<p>{this.state.patientName}</p>
</Jumbotron>
</div>
)
}
}
export default PatientForm;
Here the handleSubmit function is revoked when the checkbox is clicked.

You need to attach the handleSubmit function to onChange event of every <Form.Control /> you want to use to update the state properties.
Read the "Handling Multiple Inputs" documentation page for more insights.
Here is how you should write you <PatientForm /> (I renamed handleSubmit to handleChange and provide new implementation of handleSumbit):
class PatientForm extends React.Component {
constructor() {
super();
this.state = {
patientName: "",
age: null,
sex: "",
email: "",
phoneNo: null
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
const target = event.target;
const value = target.type === "checkbox" ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
handleSubmit(event) {
// e.g.: send to remote API
event.preventDefault();
console.log("state", this.state);
console.log("data sent to remote API");
}
render() {
return (
<div className="container-fluid">
<Jumbotron>
<h3 className="display-5">Enter Patient info</h3>
<Form>
<Form.Text className="text-muted">
We'll never share your details with anyone else.
</Form.Text>
<Form.Row>
<Col>
<Form.Control
name="patientName"
type="text"
placeholder="Patient name"
onChange={this.handleChange}
required
/>
</Col>
<Col>
<Form.Control
name="age"
type="number"
placeholder="Patient Age"
onChange={this.handleChange}
required
/>
</Col>
<Col>
<Form.Control
name="sex"
type="text"
placeholder="Patient Sex"
onChange={this.handleChange}
required
/>
</Col>
</Form.Row>
<br />
<Form.Group>
<Form.Control
name="email"
type="email"
placeholder="Enter email"
onChange={this.handleChange}
required
/>
</Form.Group>
<Form.Group>
<Form.Control
name="phoneNo"
type="number"
placeholder="Phone number"
onChange={this.handleChange}
required
/>
</Form.Group>
<Form.File />
<Form.Label>Patient's Eth Address</Form.Label>
<Form.Text className="text-muted">################</Form.Text>
<Form.Group>
<Form.Check
type="checkbox"
label="Tick if the entered info is correct"
/>
</Form.Group>
<Button variant="primary" type="submit" onClick={this.handleSubmit}>
Submit
</Button>
</Form>
<p>{this.state.patientName}</p>
</Jumbotron>
</div>
);
}
}

Semantic-UI-React: Form.Field is breaking layout

I'm working on a form to create a new product and I need a row with 3 equals fields but I'm not getting there using React Semantic Ui.
How can I code 3 equal input fields using react semantic ui?
That's what I've tried:
import { Form, Input, Button, TextArea, Header, Icon } from "semantic-ui-react";
function CreateProduct() {
return (
<>
<Header as="h2" block>
<Icon name="add square" color="violet" />
Cadastrar Produto
</Header>
<Form>
<Form.Group widths="equal">
<Form.Field
control={Input}
name="name"
label="Nome"
placeholder="Nome do Produto"
/>
<Form.Field
control={Input}
name="price"
label="Preço"
placeholder="Preço"
min="0.00"
step="0.10"
type="number"
/>
<Form.Field
control={Input}
name="media"
type="file"
label="Imagem"
accept="image/*"
content="Escolha Imagem"
/>
</Form.Group>
<Form.Field
control={TextArea}
name="description"
label="Descrição"
placeholder="Descrição do Produto"
/>
<Form.Field
control={Button}
inverted
color="violet"
icon="pencil alternate"
content="Cadastrar"
type="submit"
/>
</Form>
</>
);
}
export default CreateProduct;
The output that I am getting is:
See the 3rd input "Imagem"?
It seems that the field is not following the Form.Group props widths='equal' from semanctic-react-ui document

This layout is exceed because of the file type content.
May be you can try this way to get that layout
import React, { Component } from "react";
import { Form, Input, Button, TextArea } from "semantic-ui-react";
class FormExample extends Component {
fileInputRef = React.createRef();
render() {
return (
<Form>
<Form.Group widths="equal">
<Form.Field
control={Input}
name="name"
label="Nome"
placeholder="Nome do Produto"
/>
<Form.Field
control={Input}
name="price"
label="Preço"
placeholder="Preço"
min="0.00"
step="0.10"
type="number"
/>
<Form.Field>
<label>Imagem</label>
<Button
style={{ width: "100%" }}
content="Choose File"
labelPosition="left"
icon="file"
onClick={() => this.fileInputRef.current.click()}
/>
<input
ref={this.fileInputRef}
type="file"
hidden
onChange={this.fileChange}
/>
</Form.Field>
</Form.Group>
<Form.Field
control={TextArea}
name="description"
label="Descrição"
placeholder="Descrição do Produto"
/>
<Form.Field
control={Button}
inverted
color="violet"
icon="pencil alternate"
content="Cadastrar"
type="submit"
/>
</Form>
);
}
}
export default FormExample;
demo : https://codesandbox.io/s/zen-frost-9ihqw (adjust the screen size for full view)

I found a good solution just adding the "Fluid" props on the second .
<Form.Field
fluid
control={Input}
name="price"
label="Preço"
placeholder="Preço"
min="0.00"
step="0.10"
type="number"
/>

Trigger action creator on onchange of a field in redux-form

I am newbie to redux .I'm trying to create an application using redux-form. Could you please help me how to trigger an action when any changes happen in any of the field in the form .
import React from 'react'
import { Field, reduxForm } from 'redux-form'
import { Col, Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';
const renderField=({ input, label,name, type, meta})=>(
<FormGroup row>
<Label for={name} sm={2}>{label}</Label>
<Col sm={10}>
<input {...input} placeholder={label} type={type}></input>
</Col>
</FormGroup>
)
const BreakupForm=(props)=>{
console.log(props);
const { handleSubmit, pristine, reset, submitting } = props
return(
<div>
<Label >Breakup</Label>
<form onSubmit={handleSubmit}>
<Field label="Basic" name="basic" component={renderField} type="text" placeholder="basic"/>
<Field label="HRA" name="hra" component={renderField} type="text" placeholder="HRA"/>
<Field label="Transport Allowance" name="ta" component={renderField} type="text" placeholder="Transport Allowance" />
<Field label="Special Allowance" name="specialAllowance" component={renderField} type="text" placeholder="Special Allowance" />
<Field label="LTA" name="lta" component={renderField} type="text" placeholder="LTA"/>
<Field label="Medical Bills" name="medicalBills" component={renderField} type="text" placeholder="Medical Bills"/>
</form>
</div>
)
}
export default reduxForm({
form: 'breakupForm' // a unique identifier for this form
})(BreakupForm)

You can use onChange on every field you want to observe, for instance:
<Field label="Basic" name="basic" component={renderField} type="text" placeholder="basic" onChange={onChangeHandler} />
and then write your onChangeHandler which will be called with the following parameters:
event, newValue, previousValue, name
For instance, looking at your code, you can listen to field basic changes like this:
const BreakupForm = (props) => {
const onBasicFieldChange = (event, newValue, previousValue, name) => {
console.log(newValue)
}
console.log(props);
const { handleSubmit, pristine, reset, submitting } = props
return (
<div>
<Label >Breakup</Label>
<form onSubmit={handleSubmit}>
<Field onChange={onBasicFieldChange} label="Basic" name="basic" component={renderField} type="text" placeholder="basic" />
<Field label="HRA" name="hra" component={renderField} type="text" placeholder="HRA" />
<Field label="Transport Allowance" name="ta" component={renderField} type="text" placeholder="Transport Allowance" />
<Field label="Special Allowance" name="specialAllowance" component={renderField} type="text" placeholder="Special Allowance" />
<Field label="LTA" name="lta" component={renderField} type="text" placeholder="LTA" />
<Field label="Medical Bills" name="medicalBills" component={renderField} type="text" placeholder="Medical Bills" />
</form>
</div>
)
}

Well, according to Redux Form documentation, Redux Form onChange callback
Field component accepts a prop (onChange), you can pass a function to the onChange props.
<Field label="Basic" onChange={this.handleChange} name="basic" component={renderField} type="text" placeholder="basic"/>
handleChange will be a function defined in your class.
Since your component is stateless component, you can passs the callback function through props
<Field label="Basic" onChange={props.handleChange} name="basic" component={renderField} type="text" placeholder="basic"/>