We Keep Coding

How to use multiple conditions to validate form with react final form

I have form inside my react app,
And i would like to use this condition to validate the form before send the data to backend.
<div className="card-body">
<h3 className="mt-2 btn-primary text-center"> Diseño ChatBot </h3>
<Form
onSubmit={onSubmit}
validate={values => {
const errors = {};
if (!values.text || !values.link ||!values.image) {
errors.error = 'Es necesario cumplimentar uno de estos tres campo: Texto, Imagen, Link';
} else {errors.error = undefined;}
return errors;
}}
initialValues={{ title: title, text: text, link: link, link_title: link_title, image: image, image_title: image_title }}
render={({ handleSubmit, values, errors }) => (
<form id='editForm' className="row mt-4" onSubmit={handleSubmit} >
<div className="col-md-1 mb-4">
<label htmlFor="inputDescription" className="form-label text-center">
<h5> Título </h5>
</label>
</div>
<div className="col-md-11">
<Field
type="text"
className="form-control"
name='title'
component="input"
/>
</div>
<div className="col-md-1 mb-4">
<label htmlFor="inputResponse" className="form-label text-center" >
<h5> Texto </h5>
</label>
</div>
<div className="col-md-11">
<Field
className="form-control"
type="textarea"
name='text'
component="input"
/>
</div>
<div className="col-md-1 mb-4">
<label htmlFor="link" className="form-label text-center" >
<h5> Link </h5>
</label>
</div>
<div className="col-md-5">
<Field
className="form-control"
type="link"
name="link"
component="input"
/>
</div>
<div className="col-md-1">
<label htmlFor="link_title" className="form-label text-center" >
<h5> Title Link </h5>
</label>
</div>
<div className="col-md-5">
<Field
className="form-control"
type="text"
name='link_title'
component="input"
/>
</div>
<div className="col-md-1 mb-4">
<label htmlFor="image" className="form-label text-center" >
<h5> Image </h5>
</label>
</div>
<div className="col-md-5">
<Field
name="image"
type="file"
component={UploadImage}
/>
</div>
<div className="col-md-1">
<label htmlFor="image_title" className="form-label text-center" >
<h5> Title Image </h5>
</label>
</div>
<div className="col-md-5">
<Field
className="form-control"
type="text"
name='image_title'
component="input"
/>
</div>
<div>
{(isCreated && !isVariationsError) &&
<div className="alert alert-success" role='alert'>
Respuesta EDITADA Correctamente
</div>
}
</div>
<div className="buttons text-center">
<Volver className={"btn btn-outline-danger me-5 mb-3"} prevStep={prevStep} step={2}/>
<button className="btn btn-outline-warning me-5 mb-3" onClick={(e) => (e.preventDefault(), openPreview(values))} >Preview</button>
<SaveAndEdit className={"btn btn-outline-success me-5 mb-3"} idForm={'editForm'} text={'Guardar Cambios'}/>
<Cancelar className={"btn btn-outline-dark me-5 mb-3"} />
</div>
{errors.error && <Error meta={errors.error} /> }
<pre>{JSON.stringify(values, undefined, 2)}</pre>
<pre>{JSON.stringify(errors, undefined, 2)}</pre>
</form>
)}
/>
</div>
I have outside the form this Component Error with this:
const Error = (meta) => (
<h3 className="alert alert-danger text-center mt-5">{meta.meta}</h3>
);
If i use just with one condition like
validate={values => {
const errors = {};
if (!values.text) {
errors.error = 'Es necesario cumplimentar uno de estos tres campo: Texto, Imagen, Link';
} else {errors.error = undefined;}
return errors;
}}
works Fine, but if i try to use more conditions inside the conditional, not works.
Any idea to guide me?
Thanks

How to create this 3 button in react Js?

I'm trying to create this 3 button but I can't create third button because I don't know how use multiple useState in React Js.
This is my code :
const ShowOrNot = () => {
const [showForm, setShowForm] = useState(false);
const [showPreview , setShowPreview] = useState(false)
return (
<div className="col-12">
{showForm ? (
<div className={"content-send-form-wrapper"} id="scrollbar-style">
<div className={"content-send-form-header"}>
<div className={"content-send-form-header-title"}>
</div>
<h2>
New Upload
</h2>
<div className={"content-send-form-close-btn"}>
<button onClick={() => setShowForm(false)} className={"close-modal-btn"}>
Close <span></span>
</button>
</div>
</div>
<form className={"mt-3 content-send-form-data register-teacher-inputs-box "}>
<Row>
<div className={"col-lg-6 col-12 mt-4"}>
<label
htmlFor={"name"} className={" text-right"}>
<span>*</span>
</label>
<input type="text" className="form-control" placeholder={"عنوان"}
name={""} required="true"
// value={this.name}
// onChange={this.onChange}
onBlur={(e) => e.target.placeholder = "عنوان"}
onFocus={(e) => e.target.placeholder = ""}
/>
</div>
<div className={"col-lg-6 col-12 mt-4"}>
<label
htmlFor={"country"} className={" text-right"}>
<span>*</span>
</label>
<input type="text" className="form-control" placeholder={"دسته بندی"}
name={"country"}
// value={this.country}
// onChange={this.onChange}
required="true"
onBlur={(e) => e.target.placeholder = "دسته بندی"}
onFocus={(e) => e.target.placeholder = ""}
/>
</div>
</Row>
<Row>
<div className="col-12 mt-3">
<label
htmlFor={"name"} className={"label-full-size text-right"}>
<span>*</span>
</label>
<input type="text" className="form-control" placeholder={"خلاصه توضیحات"}
name={""} required="true"
// value={this.name}
// onChange={this.onChange}
onBlur={(e) => e.target.placeholder = "خلاصه توضیحات"}
onFocus={(e) => e.target.placeholder = ""}
/>
</div>
</Row>
<Row>
<div className="col-12 mt-3">
<label
htmlFor={"name"} className={"label-full-size text-right textarea-label"}>
<span>*</span>
</label>
<textarea className="video-text-form form-control" placeholder={"متن ویدیو"}
name={""} required="true"
// value={this.name}
// onChange={this.onChange}
onBlur={(e) => e.target.placeholder = "متن ویدیو"}
onFocus={(e) => e.target.placeholder = ""}
/>
</div>
</Row>
<Row>
<div className="col-12 mt-3 video-upload-input-btn">
<VideoUpload />
</div>
</Row>
<Row>
<div className="col-lg-6 col-12 mt-3">
<PosterUpload />
</div>
<div className="col-lg-6 col-12 mt-3">
<CoverUpload />
</div>
</Row>
</form>
{showPreview ? (
<div>
show preview
</div>
) : (<Row>
<div className="col-lg-8 col mt-3">
<button className="preview-send-data-btn" onClick={function(event){ setShowPreview(true); setShowForm(true)}}>
Preview
</button>
</div>
<div className="col-lg-4 col mt-3">
<button className="draft-send-data-btn">
Draft
</button>
</div>
</Row>)}
</div>
) : (
<div>
<button className="upload-content-btn w-100" onClick={() => setShowForm(true)}>
<span className="ml-2">
</span>New Upload </button>
</div>
)}
</div>
);
};
ReactDOM.render(<ShowOrNot />, document.getElementById("root"))
I want when click on Preview button showFrom not show and other form that in showPreview display instead. My problem is not about CSS and just I don't know how to use useState like before steps I used it.

In your example Preview inside of Form, so if you hide form preview will be hidden too.
You need to properly organize components so your code will be easy to read and understand. Without that you can not solve any complex enough task.
Can start like this.
const ShowOrNot = () => {
const [showForm, setShowForm] = useState(false);
const [showPreview, setShowPreview] = useState(false);
const [formHidden, setFormHidden] = useState(false);
return (
<div className="col-12">
{!showForm ? (
<ShowFormButton onClick={() => setShowForm(true)} />
) : undefined}
{showForm ? (
<div className={'content-send-form-wrapper'} id="scrollbar-style">
<div className={'content-send-form-header'}>
<div className={'content-send-form-header-title'}></div>
<h2>New Upload</h2>
<HideFormButton
onClick={() => {
setShowForm(false);
}}
/>
</div>
{!formHidden ? <MyForm /> : undefined}
{!showPreview ? (
<ShowPreviewButton
onClick={() => {
setShowPreview(true);
setFormHidden(true);
}}
/>
) : undefined}
{showPreview ? (
<div>
Preview
<SendButton
onClick={() => {
setFormHidden(false);
setShowPreview(false);
setShowForm(false);
}}
/>
</div>
) : undefined}
</div>
) : undefined}
</div>
);
};
function SendButton({ onClick }) {
return (
<div>
<button className=" w-100" onClick={onClick}>
<span className="ml-2"></span>Send
</button>
</div>
);
}
function ShowFormButton({ onClick }) {
return (
<div>
<button className="upload-content-btn w-100" onClick={onClick}>
<span className="ml-2"></span>New Upload{' '}
</button>
</div>
);
}
function ShowPreviewButton({ onClick }) {
return (
<Row>
<div className="col-lg-8 col mt-3">
<button className="preview-send-data-btn" onClick={onClick}>
Preview
</button>
</div>
<div className="col-lg-4 col mt-3">
<button className="draft-send-data-btn">Draft</button>
</div>
</Row>
);
}
function HideFormButton({ onClick }) {
return (
<div className={'content-send-form-close-btn'}>
<button onClick={onClick} className={'close-modal-btn'}>
<span>Close</span>
</button>
</div>
);
}
function MyForm() {
return (
<form
className={'mt-3 content-send-form-data register-teacher-inputs-box '}
>
<Row>
<div className={'col-lg-6 col-12 mt-4'}>
<label htmlFor={'name'} className={' text-right'}>
<span>*</span>
</label>
<input
type="text"
className="form-control"
placeholder={'عنوان'}
name={''}
required="true"
// value={this.name}
// onChange={this.onChange}
onBlur={(e) => (e.target.placeholder = 'عنوان')}
onFocus={(e) => (e.target.placeholder = '')}
/>
</div>
<div className={'col-lg-6 col-12 mt-4'}>
<label htmlFor={'country'} className={' text-right'}>
<span>*</span>
</label>
<input
type="text"
className="form-control"
placeholder={'دسته بندی'}
name={'country'}
// value={this.country}
// onChange={this.onChange}
required="true"
onBlur={(e) => (e.target.placeholder = 'دسته بندی')}
onFocus={(e) => (e.target.placeholder = '')}
/>
</div>
</Row>
<Row>
<div className="col-12 mt-3">
<label htmlFor={'name'} className={'label-full-size text-right'}>
<span>*</span>
</label>
<input
type="text"
className="form-control"
placeholder={'خلاصه توضیحات'}
name={''}
required="true"
// value={this.name}
// onChange={this.onChange}
onBlur={(e) => (e.target.placeholder = 'خلاصه توضیحات')}
onFocus={(e) => (e.target.placeholder = '')}
/>
</div>
</Row>
<Row>
<div className="col-12 mt-3">
<label
htmlFor={'name'}
className={'label-full-size text-right textarea-label'}
>
<span>*</span>
</label>
<textarea
className="video-text-form form-control"
placeholder={'متن ویدیو'}
name={''}
required="true"
// value={this.name}
// onChange={this.onChange}
onBlur={(e) => (e.target.placeholder = 'متن ویدیو')}
onFocus={(e) => (e.target.placeholder = '')}
/>
</div>
</Row>
<Row>
<div className="col-12 mt-3 video-upload-input-btn">
<VideoUpload />
</div>
</Row>
<Row>
<div className="col-lg-6 col-12 mt-3">
<PosterUpload />
</div>
<div className="col-lg-6 col-12 mt-3">
<CoverUpload />
</div>
</Row>
</form>
);
}
ReactDOM.render(<ShowOrNot />, document.getElementById('root'));

you should use setState like this code
setShowForm(false) or setShowForm(true)
and
setShowPreview(true) or setShowPreview(false)

ReactJs data inside loop empty

<div className="col-md-12">
<div className="row">
{shopeeship.map(function (key,value) {
if(key.enabled){
console.log("yes");
<div className="col-md-6">
<div className="form-group">
<span className="mr-4 pr-4">
<IntlMessages id="shopee.poswm" />
</span>
<label className="pull-right" title="">
<Switch/>
</label>
</div>
</div>
}})}
</div>
</div>
I have some data and want to loop through it to render some UI. In the above code I tried to loop the data and I checked that if the key enabled then to echo the html value. It successfully prints yes in console log but the html does not render as expected. Anyone has faced such an issue before? Please help.

It's because you forgot to return your html from loop
Do this
<div className="col-md-12">
<div className="row">
{shopeeship.map(function (key,value) {
if(key.enabled){
console.log("yes");
return(
<div className="col-md-6">
<div className="form-group">
<span className="mr-4 pr-4">
<IntlMessages id="shopee.poswm" />
</span>
<label className="pull-right" title="">
<Switch/>
</label>
</div>
</div>
)
}})}
</div>
</div>

You are not returning from map, you can use arrow function instead for implicit return as
<div className="col-md-12">
<div className="row">
{shopeeship.map((key,value) => key.enabled &&
(<div className="col-md-6">
<div className="form-group">
<span className="mr-4 pr-4">
<IntlMessages id="shopee.poswm" />
</span>
<label className="pull-right" title="">
<Switch/>
</label>
</div>
</div>)
)}
</div>
</div>
Hope it helps

you need to return the html part, map creates a new array and expects a return value else your array will be filled with null values, hence you would need to return the said html part.

Try this simplified solution using ternary condition and arrow function.
<div className="col-md-12">
<div className="row">
{shopeeship.map((key,value)=> key.enabled ?
<div className="col-md-6" key={value}>
<div className="form-group">
<span className="mr-4 pr-4">
<IntlMessages id="shopee.poswm" />
</span>
<label className="pull-right" title="">
<Switch/>
</label>
</div>
</div>
:null)}
</div>
</div>

state uses with authentication

i'm new in coding and i I still have a problem with if else condition, i have 2 authentication and one back end , one for react native and one for react ,
in Login i want to add is_store , i want to tell the system that if the username & password correct and is_sore = true , make him logged in and if the password right and the username right BUT is_store = false don't logged him in
i'm trying to pass is_store to Login component
i tried if condition but it give me wrong alert
Signup component
class RegistationForm extends Component {
state = {
username: "",
phone_number: "",
password: "",
email: "",
is_store: true <--- i want to pass it to Login
};
componentWillUnmount() {
this.props.errors.length && this.props.resetError();
}
changeHandler = e => {
this.setState({ [e.target.name]: e.target.value });
};
submitHandler = async e => {
e.preventDefault();
this.props.signup(this.state, this.props.history);
};
render() {
return (
<div className="container">
<div
style={{ marginTop: "125px" }}
className="card o-hidden border-0 shadow-lg col-12"
>
<div className="card-body p-0">
<div className="row">
<div className="col-lg-5 d-none d-lg-block bg-register-image col-12" />
<div className="col-lg-7 col-12">
<div className="p-5">
<div className="text-center col-12">
<h1 className="h4 text-gray-900 mb-4 col-12">
إنشاء حساب جديد
</h1>
</div>
<div className="text-center col-12">
{!!this.props.errors.length && (
<div className="text-left alert alert-danger">
{this.props.errors.map(error => (
<li key={error}>{error}</li>
))}
</div>
)}
</div>
<form onSubmit={this.submitHandler}>
<div className="form-group row">
<div className="col-sm-6 mb-3 mb-sm-0">
<Input
name="username"
value={this.state.username}
onChange={this.changeHandler}
className="form-control form-control-user"
placeholder=" السجل التجاري"
required
/>
</div>
<div className="col-sm-6 mb-3 mb-sm-0">
<Input
name="phone_number"
value={this.state.phone_number}
type="tel"
onChange={this.changeHandler}
className="form-control form-control-user"
placeholder="Mobile Ex: 966555555555"
required
pattern="[0-9]{12}"
/>
</div>
<br />
<br />
<div className="col-sm-6 mb-3 mb-sm-0">
<Input
name="password"
value={this.state.password}
onChange={this.changeHandler}
type="password"
className="form-control form-control-user"
placeholder="الرقم السري"
required
/>
</div>
<div className="col-sm-6 mb-3 mb-sm-0 ">
<Input
name="email"
value={this.state.email}
onChange={this.changeHandler}
type="email"
className="form-control form-control-user"
placeholder="الإيميل"
required
/>
</div>
<div className="col-12">
<button
style={{ padding: 9, marginTop: 20 }}
type="submit"
className="btn btn-success col-12 "
>
إنشئ حساب
</button>
</div>
</div>
</form>
<div className="text-center">
<Link to="/login" className="small">
املك حساب من قبل: تسجيل الدخول
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
Login component
class Login extends Component {
state = {
username: "",
password: "",
is_store: false <-- is here the right place?
};
componentWillUnmount() {
this.props.errors.length && this.props.resetError();
}
changeHandler = e => {
this.setState({ [e.target.name]: e.target.value });
};
submitHandler = async e => {
e.preventDefault();
## here is what i'm trying to do with is_store
if (this.state.is_store === true) {
this.props.login(this.state, this.props.history);
} else {
alert("Wrong");
}
};
render() {
return (
<div className="container">
<div className="row justify-content-center" style={{ marginTop: 125 }}>
<div className="col-xl-10 col-lg-12 col-md-9">
<div className="card o-hidden border-0 shadow-lg my-5">
<div className="card-body p-0">
<div className="row">
<div className="col-lg-6 d-none d-lg-block bg-login-image" />
<div className="col-lg-6">
<div className="p-5">
<div className="text-left">
<h1 className="h4 text-gray-900 mb-4">تسجيل الدخول</h1>
{!!this.props.errors.length && (
<div className="alert alert-danger" role="alert">
{this.props.errors.map(error => (
<li key={error}>{error}</li>
))}
</div>
)}
</div>
<form onSubmit={this.submitHandler}>
<div
className="form-group col-12"
style={{ padding: 0 }}
>
<Input
name="username"
className="form-control form-control-user"
onChange={this.changeHandler}
value={this.state.username}
placeholder="رقم السجل التجاري"
/>
</div>
<div
className="form-group col-12"
style={{ padding: 0 }}
>
<Input
type="password"
className="form-control form-control-user"
name="password"
value={this.state.passsword}
onChange={this.changeHandler}
placeholder="الرقم السري"
/>
</div>
<button
style={{ padding: 9 }}
type="submit"
className="btn btn-primary col-12"
>
دخول
</button>
<hr />
</form>
<hr />
<div className="text-center">
<NavLink to={`/signup`}>إنشاء حساب جديد</NavLink>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
this is authentication actions
export const login = (userData, history) => {
return async dispatch => {
try {
let response = await instance.post("user/login/", userData);
let user = response.data;
setAuthToken(user.token);
let decodedUser = jwt_decode(user.token);
dispatch(setCurrentUser(decodedUser));
history.push("/home");
} catch (error) {
console.log("error", error);
dispatch(setErrors(error.response.data));
}
};
};
thank you

In general, You can pass a state to a child component only. You can not pass a state from a child to its parent component.
In order to pass state to a parent component, you need to store that value. You can do it with Redux. Which stores the values and you can get that value in any component.

React ReduxForm img upload and validation

I'm trying to create an img uploader inside my ReduxForm that will only accept imgs that are .png and no larger than 210x210 and 2mb. Also, the design says to swap the placeholder img with the uploaded file which I'm also struggling with. Here's my code:
renderProfileImgUpload(field) {
const { meta: { touched, error }, label, name, accept, type } = field;
return (
<div>
<div className="login__fieldError">
<small>{touched ? error : ''}</small>
</div>
<label htmlFor="img-upload">
<img src="imgs/profile-select.png" className="img-responsive" alt="" />
</label>
<input type={type} name={name} accept={accept} id="img-upload" />
</div>
)
}
render() {
const { handleSubmit, showNextRegistration, showPreviousRegistration } = this.props;
return (
<div className="widgetFull--white">
<div className="align-middle row registration--fullHeight">
<div className="columns small-3">
<img
src="imgs/account-arrow-left.png"
alt="menu"
className="img-responsive"
onClick={showPreviousRegistration}
/>
</div>
<div className="columns small-6">
<h2 className="registration__header">Edit account</h2>
</div>
<div className="columns small-3">
<h3 className="registration__index">2 of 2</h3>
</div>
<form onSubmit={ handleSubmit(this.onSubmit.bind(this)) }>
<div className="columns small-3">
<Field label="Profile Image" type="file" name="image" accept="image/.png" component={this.renderProfileImgUpload} />
</div>
<div className="columns small-6">
<Field label="Username" type="screenname" name="screenname" component={this.renderUsernameField} />
</div>
<div className="columns small-6">
<Field label="First Name" type="firstName" name="firstName" component={this.renderFirstNameField} />
</div>
<div className="columns small-6">
<Field label="Last Name" type="lastName" name="lastName" component={this.renderLastNameField} />
</div>
<div className="columns small-12">
<button className="button expanded registration__btn" type="button">Next</button>
</div>
</form>
</div>
</div>
)
}
Currently I'm unsure whether it would be better to try and do the validation when uploading the img, or inside the handle submit function. Thanks for your help!