I downloaded and was running this React project. It compiled successfully and it works for me.
But see the following:
<div className="jumbotron">
<h4>Login</h4>
{ error && <div className="alert alert-danger" dangerouslySetInnerHTML={ this.createMarkup( error ) }/> }
<form onSubmit={ this.onFormSubmit }>
<label className="form-group">
Username:
<input
type="text"
className="form-control"
name="username"
value={ username }
onChange={ this.handleOnChange }
/>
</label>
<br/>
<label className="form-group">
Password:
<input
type="password"
className="form-control"
name="password"
value={ password }
onChange={ this.handleOnChange }
/>
</label>
<br/>
<button className="btn btn-primary mt-3" type="submit">Login</button>
<p>{ loading && <img src={Loader} className="loader" alt="Loader"/> }</p>
</form>
</div>
Where are btn-primary, alert-danger, etc. defined?
Thanks for any help.
The classes btn-primary and alert-danger are part of bootstrap, a framework for developing websites. You can find the docs for the buttons here; for the alerts here.
The bootstrap css file is loaded in the index.pug file.
link(rel="stylesheet", href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css")
Note that this has absolutely nothing to do with wordpress. Bootstrap is a completely independent framework and can, as such, be incorporated in any website whatsoever, wordpress or not.
Related
I'm working on a project which required ant design datepicker along with bootstrap.I'm not sure whats making this datepicker move out of screen. Is there something I need to do with bootstrap classes to fix this? I have shared my screenshot.thanenter image description here]1]1
const form= () => (
<form onSubmit={onFormSubmit}>
<div className="form-group">
<label className="btn btn-outline-secondary btn-block m-3">Add image
<input type="file" name="image" onChange={handleImageChange} accept="image/*" hidden/>
</label>
<input className="form-control m-2" type="text" name="title" placeholder="title" onChange={handleChange} value={title}/>
<textarea className="form-control m-2" type="text" name="content" placeholder="content" onChange={handleChange} value={content}/>
<AlgoliaPlaces className="form-control ml-2" placeholder="location" defaultValue={location} options={config} onChange={handleSearch} style={{height:"50px"}} />
<input className="form-control m-2" type="number" name="price" placeholder="price" onChange={handleChange} value={price}/>
<input className="form-control m-2" type="number" name="bed" placeholder="Number of beds" onChange={handleChange} value={bed}/>
</div>
**<DatePicker className="form-control m-2"/>**
<button className="btn btn-outline-primary m-2">Add</button>
</form>
)
return(
<div>
<div className="container-fluid p-5 text-center">
<h2>Add </h2>
</div>
<div className="container-fluid">
<div className="row">
<div className="col-md-10">
{hotelForm()}
</div
<div className="col-md-2">
<img src={preview} alt="preview-image" className="img img-fluid m-2" />
<pre>{JSON.stringify(values,null, 2)}</pre>
</div>
</div>
</div>
</div>
)
It looks like you are missing ant design css stylesheet.
Try to add the following line at the root of your app :
import 'antd/dist/antd.css';
I want to create a payment form using stripe in react js and backend is in spring boot i am using formik to get form data and yup for form validation as i am new to react i need help in customizing stripe form
Right now i am doing something like this
<Formik
enableReinitialize={true}
initialValues={RecurringPaymentSchema}
validationSchema={RecurringPaymentValidationSchema}
onSubmit={({ setSubmitting, resetForm, setErrors }) => {
this.handleSubmit(resetForm, setErrors);
setSubmitting(false);
//resetForm();
}}
>
<Form>
<div className="py-2">
<div className="custom-control custom-radio">
<Field
className="custom-control-input"
name="monthly-plan"
type="radio"
value="monthly-subscription"
/>
<label className="custom-control-label" for="monthly-plan">
<strong>Monthly $9.99</strong>
<br />
<small className="text-muted">
Pay $9.99 every month and get access to all premium features.
</small>
</label>
</div>
<div className="custom-control custom-radio mt-3">
<Field
checked=""
className="custom-control-input"
name="annually-plan"
type="radio"
value="annual-subscription"
/>
<label className="custom-control-label" for="annually-plan">
<strong>Yearly $49.99</strong>
<span className="badge badge-primary ml-1">60% OFF</span>
<br />
<small className="text-muted">
Pay $49.99 every year and get access to all premium features.
</small>
</label>
</div>
</div>
<input id="api-key" type="hidden" value="${stripePublicKey}" />
<div className="form-group">
<label className="font-weight-medium" for="card-element">
Enter credit or debit card below
</label>
<div className="w-100">
{/* A Stripe Element will be inserted here. */}
<Elements stripe={stripePromise}>
<CardElement
id="card-element"
options={CARD_ELEMENT_OPTIONS}
onChange={this.handleError}
/>
</Elements>
</div>
</div>
<div className="form-group">
<Field
className="form-control"
id="email"
name="email"
placeholder="Email Address"
type="email"
/>
<p className="errors">
<ErrorMessage name="email" />
</p>
</div>
{/* Used to display Element errors. */}
<div
className="text-danger w-100"
id="card-errors"
role="alert"
></div>
<div className="form-group pt-2">
<button
className="btn btn-primary btn-block"
id="submitButton"
type="submit"
>
Pay With Your Card
</button>
</div>
</Form>
</Formik>
Now i want validation of stripe as well as my radio buttons or other form elements using yup
my schemas are
import * as Yup from 'yup';
export const RecurringPaymentSchema = {
monthlyPlan: '',
annuallyPlan: '',
email: '',
};
export const RecurringPaymentValidationSchema = Yup.object().shape({
email: Yup.string().required("Email can't be blank"),
});
I have a react app that has a couple of inputs. The problem is, whenever I navigate to the page, it auto-fills all the fields with previously entered data on Microsoft Edge (The new one). I use Materialize for my styling. I implement my form like so:
<form onSubmit={this.handleSubmit} autoComplete='off' className="login-form">
<div className="input-field">
<input
placeholder='Type email here'
id="email"
type="email"
required
className="validate contact-input"
onChange={this.handleChange}/>
<label
className="active"
htmlFor="email">Email</label>
</div>
<div className="input-field">
<input
placeholder='Type password here'
id="password"
type="password"
required
className="validate contact-input"
onChange={this.handleChange}/>
<label
className="active"
htmlFor="password">Password</label>
</div>
<div className="input-field col s6">
<button className="btn z-depth-2 login-btn">
Sign In
</button>
</div>
</form>
Some solutions I have tried that do not work include:
<form autoComplete="off">
...
</form>
<form autoComplete="new-password">
...
</form>
<input autoComplete="off" />
<input autoComplete="new-password" />
<input autoComplete="none" />
Anyone know how to fix this?
Try this :
<input type="text" autocomplete="off" list="autocompleteOff"
id="fieldId" name="fieldname" placeholder="Placeholder here" />
Answer from here : Disable input text suggestions in Edge?
Input is a void element tag and must neither have children nor use dangerouslySetInnerHTML.
<div>
<Modal show={this.state.show} handleClose={this.hideModal} >
<div className="blkOverlay">
{/* This is Login Form to log in to your profile */}
<div className="formContent modal-main">n>
<h2>Welcome Back <span>Brandon!</span></h2>
<form show={this.state.show} handleClose={this.hideModal}>
<input type="text" name="email" placeholder="Email Address" />
<input name="password" type="text" placeholder="Password" passwordToggle="true" iconShow="eye" iconHide="eye-blocked" />
<div className="passContent">
<div className="checkingPass">
<input name="checkbox" type="checkbox"></input>
<p className="passFont">Remember Password</p>
</div>
<p className="passFont">Remember Password</p>
</div>
<input type="button" name="button">Login</input>
<div className="social-media-button">
<input type="button" name="button">Sign in with Facebook</input>
<input type="button" name="button">Sign in with Google</input>
</div>
<p className="passFont">Don't have an account? <span>Create a account</span></p>
</form>
</div>
{/* This is Sign up to create a account */}
</div>
</Modal>
</div>
What is the proper way to create a form in reactjs with getting this error about the input?
You should not put "Sign in with Facebook/Google" inside the input-tag. This is the reason why it is complaining about children. In React, a child is another tag inside a tag.
You should use:
<input type="button" value="Sign in with Facebook">
So I'm working on building my first application in React. I really don't know much about databases, data models, schema, etc. Is it bad practice to just store my data in the browser as I develop then worry about hooking my app up to something like firebase later?
For example, below I store some user data in an object called user and just go from there. As long as I have some way of accessing it later. Keeping in mind I'm in the beginning stages of frontend development is this bad practice?
Thanks!
var SignUpForm = React.createClass({
getUserInfo : function(event) {
event.preventDefault();
var user = {
name : this.refs.name.value,
userName : this.refs.userName.value,
email : this.refs.email.value,
password : this.refs.password.value
}
console.log(user)
this.refs.signUpForm.reset();
},
render : function() {
return (
<form onSubmit={this.getUserInfo} ref="signUpForm">
<div className="form-group">
<label>First and Last Name</label>
<input type="text" className="form-control" ref="name" />
</div>
<div className="form-group">
<label>Username</label>
<input type="text" className="form-control" ref="userName" />
</div>
<div className="form-group">
<label>Email Address</label>
<input type="email" className="form-control" ref="email" />
</div>
<div className="form-group">
<label>Password</label>
<input type="password" className="form-control" ref="password" />
</div>
<button type="submit" className="btn btn-primary">Sign Up</button>
</form>
);
}
});