I have the following functional component:
import React from "react";
import { Card, Row, FormGroup,Label,Button } from 'reactstrap';
import { Formik, Form, Field } from 'formik';
import axios from "axios";
const addSlidersUrl = "anApiUrl";
const validateSliderSlug = (value) => {
let error;
if(!value){
error="Please enter a Slider Slug value";
}
return error;
}
const validateSliderImage = (value) => {
let error;
if(!value){
error="Please enter a Slider Image value";
}
return error;
}
const validateSliderEnText = (value) => {
let error;
if(!value){
error="Please enter a Slider En Text value";
}
return error;
}
const validateSliderArText = (value) => {
let error;
if(!value){
error="Please enter a Slider Ar Text value";
}
return error;
}
const validateSliderEnButtonText = (value) => {
let error;
if(!value){
error="Please enter a Slider En Button Text value";
}
return error;
}
const validateSliderArButtonText = (value) => {
let error;
if(!value){
error="Please enter a Slider Ar Button Text value";
}
return error;
}
const validateSliderEnButtonLink = (value) => {
let error;
if(!value){
error="Please enter a Slider En Button Link value";
}
return error;
}
const validateSliderArButtonLink = (value) => {
let error;
if(!value){
error="Please enter a Slider Ar Button Link value";
}
return error;
}
const AddSlider = (props) => {
const ontNewSliderSubmit = (values) => {
if( values.sliderSlug !== '' && values.sliderImage !== '' && values.sliderEnText !== '' && values.sliderArText !== '' && values.sliderEnButtonText !== '' && values.sliderArButtonText !== '' && values.sliderEnButtonLink !== '' && values.sliderArButtonLink !== ''){
axios.post(
addSlidersUrl,
{
adminid: props.adminid,
token: props.adminlogintoken,
slider_slug: values.sliderSlug,
slider_image: values.sliderImage,
slider_en_text: values.sliderEnText,
slider_ar_text: values.sliderArText,
slider_en_button_text: values.sliderEnButtonText,
slider_ar_button_text: values.sliderArButtonText,
slider_en_button_link: values.sliderEnButtonLink,
slider_ar_button_link: values.sliderArButtonlink,
}
)
.then(
res => console.log(res)
)
.catch(
err => console.log(err)
);
}
}
return (
<Row>
<Card>
<div style={{ width: "90%", marginLeft: "auto", marginRight: "auto" }}>
<Row style={{ textAlign: "center" }}>
Add A New Slider
</Row>
<Row>
<Formik onSubmit={ontNewSliderSubmit}>
{({ errors}) => (
<Form>
<FormGroup className="form-group has-float-label">
<Label for="sliderSlug">
Slider Slug:
</Label>
<Field
className="form-control"
name="sliderSlug"
validate={validateSliderSlug}
/>
{errors.sliderSlug && (
<div className="invalid-feedback d-block">
{errors.sliderSlug}
</div>
)}
</FormGroup>
<FormGroup className="form-group has-float-label">
<Label for="sliderImage">
Slider Image:
</Label>
<Field
className="form-control"
name="sliderImage"
validate={validateSliderImage}
/>
{errors.sliderImage && (
<div className="invalid-feedback d-block">
{errors.sliderImage}
</div>
)}
</FormGroup>
<FormGroup className="form-group has-float-label">
<Label for="sliderEnText">
Slider En Text:
</Label>
<Field
className="form-control"
name="sliderEnText"
validate={validateSliderEnText}
/>
{errors.sliderEnText && (
<div className="invalid-feedback d-block">
{errors.sliderEnText}
</div>
)}
</FormGroup>
<FormGroup className="form-group has-float-label">
<Label for="sliderArText">
Slider Ar Text:
</Label>
<Field
className="form-control"
name="sliderArText"
validate={validateSliderArText}
/>
{errors.sliderArText && (
<div className="invalid-feedback d-block">
{errors.sliderArText}
</div>
)}
</FormGroup>
<FormGroup className="form-group has-float-label">
<Label for="sliderEnButtonText">
Slider En Button Text:
</Label>
<Field
className="form-control"
name="sliderEnButtonText"
validate={validateSliderEnButtonText}
/>
{errors.sliderEnText && (
<div className="invalid-feedback d-block">
{errors.sliderEnButtonText}
</div>
)}
</FormGroup>
<FormGroup className="form-group has-float-label">
<Label for="sliderArButtonText">
Slider Ar Button Text:
</Label>
<Field
className="form-control"
name="sliderArButtonText"
validate={validateSliderArButtonText}
/>
{errors.sliderArButtonText && (
<div className="invalid-feedback d-block">
{errors.sliderArButtonText}
</div>
)}
</FormGroup>
<FormGroup className="form-group has-float-label">
<Label for="sliderEnButtonlink">
Slider En Button Link:
</Label>
<Field
className="form-control"
name="sliderEnButtonLink"
validate={validateSliderEnButtonLink}
/>
{errors.sliderEnButtonLink && (
<div className="invalid-feedback d-block">
{errors.sliderEnButtonLink}
</div>
)}
</FormGroup>
<FormGroup className="form-group has-float-label">
<Label for="sliderArButtonLink">
Slider Ar Button Link:
</Label>
<Field
className="form-control"
name="sliderArButtonLink"
validate={validateSliderArButtonLink}
/>
{errors.sliderArButtonLink && (
<div className="invalid-feedback d-block">
{errors.sliderArButtonLink}
</div>
)}
</FormGroup>
<div style={ {display:"flex",flexDirection:"row",alignItems:"center",width:"50%",justifyContent:"space-between"} }>
<Button
color="success"
type="submit"
>
Add Slider
</Button>
<Button
color="danger"
type="button"
onClick={props.cancelAddingItem}
>
Cancel
</Button>
</div>
</Form>
)}
</Formik>
</Row>
</div>
</Card>
</Row>
);
}
export default AddSlider;
It's just a simple component that has a formik which should allow me to fill in the fields and when pressing the Add Slider button it should validate that I didn't leave any field empty before executing a function. The problem is that as soon as I type in any field I receive the following 2 errors and I cannot understand why:
Edit: Note that I'm getting the error as soon as I type 1 letter in any of the fields not after i press the submit button.
