I'm trying to use bootstrap 4 to display an error of an input from a form.
Everything It's working but once I click the "SignUp" button with the empty form, no red error is display it. So the ""has-danger"" class from Bootstrap 4 doesn't work. I would like to know if the is any other way to user the error class from Bootstap 4.
import React from 'react';
import PropTypes from 'prop-types';
import map from 'lodash/map';
import classnames from 'classnames';
class SignUpForm extends React.Component {
constructor(props) {
super(props);
this.state = {
firstname: '',
lastname: '',
username: '',
password: '',
email: '',
errors: {},
isLoading: false
}
this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
onChange(e) {
this.setState({
[e.target.name]: e.target.value
});
}
onSubmit(e) {
e.preventDefault();
this.setState({errors: {}, isLoading: true});
this.props.userSignUpRequest(this.state).then(() => {}, ({data}) => this.setState({errors: data, isLoading: false}));
}
render() {
const {errors} = this.state;
return (
<form onSubmit={this.onSubmit}>
<div className={classnames('form-group', {'has-danger': errors.firstname})}>
<label className="form-control-label">
First Name
</label>
<input value={this.state.firstname} onChange={this.onChange} type="text" name="firstname" className="form-control form-control-danger" id="inputDanger1"/> {errors.firstname && <span className="help-block">{errors.firstname}</span>}
</div>
<div className="form-group has-danger">
<label className="form-control-label">
Last Name
</label>
<input value={this.state.lastname} onChange={this.onChange} type="text" name="lastname" className="form-control form-control-danger"/> {errors.lastname && <span className="help-block">{errors.lastname}</span>}
</div>
<div className="form-group">
<label className="control-label">
Username
</label>
<input value={this.state.username} onChange={this.onChange} type="text" name="username" className="form-control"/> {errors.username && <span className="help-block">{errors.username}</span>}
</div>
<div className="form-group">
<label className="control-label">
Password
</label>
<input value={this.state.password} onChange={this.onChange} type="text" name="password" className="form-control"/> {errors.password && <span className="help-block">{errors.password}</span>}
</div>
<div className="form-group">
<label className="control-label">
Email
</label>
<input value={this.state.email} onChange={this.onChange} type="text" name="email" className="form-control"/> {errors.email && <span className="help-block">{errors.email}</span>}
</div>
<div className="text-left">
<small>By clicking Submit, I agree that I have read and accepted the
Terms and conditions
</small>
</div>
<div className="form-group mt-1">
<button disabled={this.state.isLoading} className="btn btn-primary btn-lg">Sign Up</button>
</div>
</form>
);
}
}
SignUpForm.propTypes = {
userSignUpRequest: PropTypes.func.isRequired
}
export default SignUpForm;
Related
import axios from "axios";
import React from "react";
import { useAuthState } from "react-firebase-hooks/auth";
import { useForm } from "react-hook-form";
import { toast, ToastContainer } from "react-toastify";
import auth from "../../firebase.init";
const AddInventoryItems = () => {
const { register, handleSubmit } = useForm();
const [user] = useAuthState(auth);
const onSubmit = (data) => {
axios.post("http://localhost:5000/item", data).then((res) => {
const { data } = res;
if (data) {
toast("You have added a new item, Yeah!!!");
}
});
};
return (
<div className="row w-25 mx-auto">
<form
className="d-flex flex-column my-5 col-sm-12 col-md-6"
onSubmit={handleSubmit(onSubmit)}
>
<input
placeholder="Enter Name"
className="mb-2"
value={user.displayName}
type="text"
{...register("user name")}
required
/>
<input
placeholder="Enter Email"
className="mb-2"
type="email"
value={user.email}
{...register("email")}
/>
<input
placeholder="Image Url"
className="mb-2"
type="text"
{...register("image")}
/>
<input
placeholder="Item name"
className="mb-2"
{...register("name", { required: true, maxLength: 20 })}
/>
<input
placeholder="Item description"
className="mb-2"
{...register("description")}
/>
<input
placeholder="Item price"
className="mb-2"
type="number"
{...register("price", { min: 18, max: 99 })}
/>
<input
placeholder="Item quantity"
className="mb-2"
type="number"
{...register("quantity", { min: 18, max: 99 })}
/>
<input
placeholder="Supplier name"
className="mb-2"
{...register("supplier name")}
/>
<input
className="btn btn-outline-primary"
type="submit"
value="Add new item"
/>
</form>
<ToastContainer />
</div>
);
};
export default AddInventoryItems;
To make responsive form elements, you have to wrap all the inputs in form-group class and in their inputs you have to add class form-control
example:
<div class="form-group">
<label for=""></label>
<input type="email" class="form-control" />
</div>
take a look on Bootstrap documentation:
https://getbootstrap.com/docs/5.1/forms/overview/
Use form-control class in your form input field. So your form field will be responsive.
<form className="d-flex flex-column my-5 col-sm-12 col-md-6 form-control" onSubmit={handleSubmit(onSubmit)}>
You can also see bootstrap official documentation for more detail
I have a hidden field when you clicked the YES option, I want to reset the form to hide again the field after successful submission.
Below is my code and here is the link to sandbox.
import { React, useState } from "react";
import emailjs from "emailjs-com";
import { useForm } from "react-hook-form";
const NameForm = () => {
const [showYes, setShowYes] = useState(false);
const {
register,
handleSubmit,
reset,
formState: { errors }
} = useForm({
defaultValues: { yes_no: false, yes_i_understand: false }
});
const sendEmail = formData => {
emailjs
.send("YOUR_SERVICE_ID", "YOUR_TEMPLATE_ID", formData, "YOUR_USER_ID")
.then(
result => {
console.log(result.text);
},
error => {
console.log(error.text);
}
);
reset();
};
return (
<div>
<h1 className="text-center text-md-left mb-3">Get in Touch</h1>
<p>Have you spoken to a us in the last 14 days?</p>
<form className="contact-form" onSubmit={handleSubmit(sendEmail)}>
<div className="mb-2">
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
value="Yes"
id="yes"
name="yes_no"
onClick={setShowYes}
/>
<label className="form-check-label mr-4" htmlFor="yes">
Yes
</label>
</div>
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
value="No"
id="no"
name="yes_no"
defaultChecked
onClick={() => setShowYes(false)}
/>
<label className="form-check-label mr-4" htmlFor="no">
No
</label>
</div>
</div>
{showYes && (
<div className="form-group row mb-0">
<div className="col-12 py-3">
<input
type="text"
className="form-control custom--fields-mod text-the-primary"
id="agentName"
placeholder="Agent Name *"
name="agent_name"
{...register("agent_name", { required: true })}
/>
{errors.agent_name && (
<span className="invalid-feedback d-block">
Please fill out this field.
</span>
)}
</div>
</div>
)}
<div className="form-group mb-0 py-3">
<textarea
className="form-control custom--fields-mod text-the-primary"
id="message"
rows="3"
placeholder="Message *"
name="message"
{...register("message", { required: true })}
></textarea>
{errors.message && (
<span className="invalid-feedback d-block">
Please fill out this field.
</span>
)}
</div>
<div className="form-group row py-2 mb-0">
<div className="col-12 text-center text-md-left py-2 py-md-0">
<input
className="buttons-width float-md-right btn btn-dark-moderate-orange rounded-0"
type="submit"
value="SEND MESSAGE"
/>
</div>
</div>
</form>
</div>
);
};
export default NameForm;
I'm not sure if I missed something on passing the data to the form. I also put defaultChecked attribute in option NO.
The 'showYes' state should be reset to false after submission.
I updated some codes.
https://codesandbox.io/s/react-hook-form-using-emailjs-2-forked-fmido?file=/src/App.js
const resetForm = () => {
reset();
setShowYes(false);
};
const sendEmail = (formData) => {
emailjs
.send("YOUR_SERVICE_ID", "YOUR_TEMPLATE_ID", formData, "YOUR_USER_ID")
.then((result) => {
console.log(result.text);
resetForm();
},
(error) => {
console.log(error.text);
}
);
};
I'm not sure if I missed something on passing the data to the form. I also put defaultChecked attribute in option NO.
<input
className="form-check-input"
type="radio"
value="true"
id="yes"
name="yes_no"
{...register("yes_no", { required: true })}
onClick={setShowYes}
/>
<label className="form-check-label mr-4" htmlFor="yes">
Yes
</label>
At the moment I try to write in the form and save it in the state, I get this error:
Warning: A component is changing an uncontrolled input of type text to
be controlled. Input elements should not switch from uncontrolled to
controlled (or vice versa). Decide between using a controlled or
uncontrolled input element for the lifetime of the component.
import React from 'react';
class ExerciseNew extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit = (e) => {
e.preventDefault();
console.log(this.state)
}
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
})
}
render() {
return (
<div className="container">
<form
onSubmit={this.handleSubmit}
>
<div className="form-group">
<input
type="text"
className="form-control"
placeholder="title"
name="title"
onChange={this.handleChange}
value={this.state.title}
/>
</div>
<div className="form-group">
<input
type="text"
className="form-control"
placeholder="description"
name="description"
onChange={this.handleChange}
value={this.state.description}
/>
</div>
<div className="form-group">
<input
type="text"
className="form-control"
placeholder="img"
name="img"
onChange={this.handleChange}
value={this.state.img}
/>
</div>
<div className="form-row">
<div className="col">
<input
type="text"
className="form-control"
placeholder="leftColor"
name="leftColor"
onChange={this.handleChange}
value={this.state.leftColor}
/>
</div>
<div className="col">
<input
type="text"
className="form-control"
placeholder="rightColor"
name="rightColor"
onChange={this.handleChange}
value={this.state.rightColor}
/>
</div>
</div>
<button
type="submit"
className="btn btn-primary"
>
Submit
</button>
</form>
</div>
)
}
}
export default ExerciseNew;
I find it curious because I am following the documentation of react, along with this video in Spanish.
I tried using babeljs and the features of ES7 so as not to have to create the constructor, so I did something like this:
import React from 'react';
class ExerciseNew extends React.Component {
state = {}
handleSubmit = (e) => {
e.preventDefault();
console.log(this.state)
}
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
})
}
render() {
return (
<div className="container">
<form
onSubmit={this.handleSubmit}
>
<div className="form-group">
<input
type="text"
className="form-control"
placeholder="title"
name="title"
onChange={this.handleChange}
value={this.state.title}
/>
</div>
<div className="form-group">
<input
type="text"
className="form-control"
placeholder="description"
name="description"
onChange={this.handleChange}
value={this.state.description}
/>
</div>
<div className="form-group">
<input
type="text"
className="form-control"
placeholder="img"
name="img"
onChange={this.handleChange}
value={this.state.img}
/>
</div>
<div className="form-row">
<div className="col">
<input
type="text"
className="form-control"
placeholder="leftColor"
name="leftColor"
onChange={this.handleChange}
value={this.state.leftColor}
/>
</div>
<div className="col">
<input
type="text"
className="form-control"
placeholder="rightColor"
name="rightColor"
onChange={this.handleChange}
value={this.state.rightColor}
/>
</div>
</div>
<button
type="submit"
className="btn btn-primary"
>
Submit
</button>
</form>
</div>
)
}
}
export default ExerciseNew;
and still I get the same error.
Your form is already a controlled components.
You are getting warning beacuse, you have not initialized your state. You need to have each variable in state like,
this.state = {
title: '',
description: '',
img: '',
leftColor: '',
rightColor: ''
}
Note: A you are already using arrow function for handleSubmit & handleChange, you don't need to bind them in constructor,
this.handleChange = this.handleChange.bind(this); //not needed
this.handleSubmit = this.handleSubmit.bind(this); //not needed
Live Example:
class ExerciseNew extends React.Component {
constructor(props) {
super(props);
this.state = {
title: "",
description: "",
img: "",
leftColor: "",
rightColor: "",
};
}
handleSubmit = (e) => {
e.preventDefault();
console.log(this.state)
}
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
})
}
render() {
return (
<div className="container">
<form
onSubmit={this.handleSubmit}
>
<div className="form-group">
<input
type="text"
className="form-control"
placeholder="title"
name="title"
onChange={this.handleChange}
value={this.state.title}
/>
</div>
<div className="form-group">
<input
type="text"
className="form-control"
placeholder="description"
name="description"
onChange={this.handleChange}
value={this.state.description}
/>
</div>
<div className="form-group">
<input
type="text"
className="form-control"
placeholder="img"
name="img"
onChange={this.handleChange}
value={this.state.img}
/>
</div>
<div className="form-row">
<div className="col">
<input
type="text"
className="form-control"
placeholder="leftColor"
name="leftColor"
onChange={this.handleChange}
value={this.state.leftColor}
/>
</div>
<div className="col">
<input
type="text"
className="form-control"
placeholder="rightColor"
name="rightColor"
onChange={this.handleChange}
value={this.state.rightColor}
/>
</div>
</div>
<button
type="submit"
className="btn btn-primary"
>
Submit
</button>
</form>
</div>
)
}
}
ReactDOM.render(
<ExerciseNew/>,
document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.development.js"></script>
I have made a bank account submit form. I want to save the data which is entered in the form into redux store. How can I take input value from form and store it in redux store variable ?
My client.js file has redux store and form.js is the component from which I need to get the input values.
client.js:
import { combineReducers, createStore } from 'redux';
const addUserReducer = (state={}, action) => {
switch(action.type){
case: "CHANGE_FIRSTNAME"{
state = {...state, firstname:action.payload }
break;
}
case: "CHANGE_LASTNAME"{
state = {...state, lastname:action.payload }
break;
}
case: "CHANGE_EMAILID"{
state = {...state, emailid:action.payload }
break;
}
case: "CHANGE_IBAN"{
state = {...state, iban:action.payload }
break;
}
case: "CHANGE_BANKNAME"{
state = {...state, bankname:action.payload }
break;
}
}
return state;
}
const reducers = combineReducers({
addUser:addUserReducer
})
const store = createStore(reducers);
store.subscribe(() => {
console.log('Store changed', store.getState());
})
store.dispatch({type: "CHANGE_FIRSTNAME", payload:"Will"});
store.dispatch({type: "CHANGE_LASTNAME", payload:"Groot"});
store.dispatch({type: "CHANGE_EMAILID", payload:"xyz#gmail.com"});
store.dispatch({type: "CHANGE_IBAN", payload:3234243242});
store.dispatch({type: "CHANGE_BANKNAME", payload:"XYZ"});
form.js:
import React, { Component } from "react";
import "./form.css";
class Form extends Component {
render() {
return (
<div>
<div id="center">
<form>
<div className="form-group">
<label for="firstname">First Name:</label>
<input type="firstname" className="form-control" id="firstname" />
</div>
<div className="form-group">
<label for="lastname">Last Name:</label>
<input type="lastname" className="form-control" id="lastname" />
</div>
<div className="form-group">
<label for="email">Email address:</label>
<input type="email" className="form-control" id="email" />
</div>
<div className="form-group">
<label for="bankacc">IBAN:</label>
<div id="deletebank" className="items">
<input type="bankacc" className="form-control" id="bankacc" />
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-trash" />
</button>
</div>
</div>
<div className="form-group">
<label for="bankname">Bank Name:</label>
<input type="bankname" className="form-control" id="bankname" />
</div>
<div className="form-group">
<button type="button" className="btn addbank">
+ Add bank account
</button>
</div>
<div className="form-group">
<button type="button" class="btn btn-success">
Submit
</button>
</div>
</form>
</div>
</div>
);
}
}
export default Form;
Screenshot of my form:
I would recommend react-redux to connect your components with redux store, however it is still doable without it:
Create action creators that will update specific variable in the store:
import { bindActionCreators } from "redux";
const updateFirstName = name => ({ type: "CHANGE_FIRSTNAME", payload: name });
const updateLastName = lastName => ({
type: "CHANGE_LASTNAME",
payload: lastName
});
const updateEmail = email => ({ type: "CHANGE_EMAILID", payload: email });
const updateIban = iban => ({ type: "CHANGE_IBAN", payload: iban });
const updateBankName = bankName => ({
type: "CHANGE_BANKNAME",
payload: bankName
});
Now bind your action creators with dispatch, so calling actionCreators.updateFirsName('something') will actually dispatch an action to the store.
export const actionCreators = bindActionCreators(
{
updateFirstName,
updateLastName,
updateEmail,
updateIban,
updateBankName
},
store.dispatch
);
Now you only need to call each store-updating function whenever theres an change on the input:
import React, { Component } from "react";
import "./form.css";
import { actionCreators } from "/path/to/store";
class Form extends Component {
render() {
return (
<div>
<div id="center">
<form>
<div className="form-group">
<label for="firstname">First Name:</label>
<input
type="firstname"
className="form-control"
id="firstname"
onChange={e => actionCreators.updateFirstName(e.target.value)}
/>
</div>
<div className="form-group">
<label for="lastname">Last Name:</label>
<input
type="lastname"
className="form-control"
id="lastname"
onChange={e => actionCreators.updateLastName(e.target.value)}
/>
</div>
<div className="form-group">
<label for="email">Email address:</label>
<input
type="email"
className="form-control"
id="email"
onChange={e => actionCreators.updateEmail(e.target.value)}
/>
</div>
<div className="form-group">
<label for="bankacc">IBAN:</label>
<div id="deletebank" className="items">
<input
type="bankacc"
className="form-control"
id="bankacc"
onChange={e => actionCreators.updateIban(e.target.value)}
/>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-trash" />
</button>
</div>
</div>
<div className="form-group">
<label for="bankname">Bank Name:</label>
<input
type="bankname"
className="form-control"
id="bankname"
onChange={e => actionCreators.updateBankName(e.target.value)}
/>
</div>
<div className="form-group">
<button type="button" className="btn addbank">
+ Add bank account
</button>
</div>
<div className="form-group">
<button type="button" class="btn btn-success">
Submit
</button>
</div>
</form>
</div>
</div>
);
}
}
export default Form;
I am trying to implement react into a small piece of a website, but for some reason it is not rendering what so ever. I am using node, express, React, and handlebars.
landing.handlebars:
<section class="section section-dark">
<div id="root"></div>
<script type="text/jsx" src="index.js"></script>
index.jsx:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
App.jsx:
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = {
name: null,
email: null,
message: null,
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({
[name]: value
});
}
handleSubmit(event) {
event.preventDefault();
}
render() {
return (
<div className="App">
<h2 className="bottom">Send Message!</h2>
<form onSubmit={this.handleSubmit} className="bottom">
<div className="form-group">
<label for="exampleInputEmail1">Email address:</label>
<input type="email" onChange= {this.handleChange} value = {this.state.email} className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" />
<small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div classNameName="form-group">
<label for="exampleInputPassword1">Name:</label>
<input type="text" onChange= {this.handleChange} value={this.state.name} className="form-control" id="exampleInputPassword1" placeholder="Name" />
</div>
<div className="form-group">
<label for="exampleTextarea">Message:</label>
<textarea onChange= {this.handleChange} value={this.state.message} className="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
<button type="submit" value="submit" className="btn btn-primary"> <i
className="fa fa-paper-plane" aria-hidden="true"></i> Send</button>
</form>
</div>
);
}
}
export default App;
It shows no sort of jsx file in the network tag at all besides the ones that are necessary (Jquery, bootstrap, etc)