I created a new react app, then I created a registration form component using mdbreact and everything was loading well. All of a sudden, the default styling associated with mdbreact suddenly stopped loading.
import React, { Component } from 'react';
import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBCard, MDBCardBody, MDBInput } from 'mdbreact';
class Registration extends Component {
render() {
return (
<MDBContainer>
<MDBRow className="d-flex justify-content-center">
<MDBCol md="6">
<form>
<p className="h5 text-center mb-4">Sign up</p>
<div className="grey-text">
<MDBInput label="Your name" icon="user" group type="text" validate error="wrong"
success="right" />
<MDBInput label="Your email" icon="envelope" group type="email" validate error="wrong"
success="right" />
<MDBInput label="Confirm your email" icon="exclamation-triangle" group type="text" validate
error="wrong" success="right" />
<MDBInput label="Your password" icon="lock" group type="password" validate />
</div>
<div className="text-center">
<MDBBtn color="primary">Register</MDBBtn>
</div>
</form>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
}
export default Registration;
Actual outcome
Expected outcome
Related
This is my code but couldnt find any solution , the data got uploaded in firebase , and authentication deatils my email id and details is there but , while trying to login it shows the eeror and i cant find any solution , tried with trim() function , but didnt work . so please try to help
My Code
import React ,{useState,useContext}from 'react';
import FirebaseContext from '../../store/FirebaseContext.js'
import './Login.css';
import {useHistory} from "react-router-dom"
[![Screen Shot for the error message][1]][1]
function Login() {
const history=useHistory()
const [password,setPassword]=useState('')
const [email,setEmail]=useState('')
const {firebase}=useContext(FirebaseContext)
const handleLogin=(e)=>{
e.preventDefault()
firebase.auth().signInWithEmailAndPassword(email.trim(),password)
.then(()=>{
alert('LoggedIn')
history.push("/")
})
.catch((error)=>{
alert(error.message)
})
}
return (
<div className='backdrop'>
<div className="loginParentDiv">
<img className='login-logo' src="https://t4.ftcdn.net/jpg/03/77/48/55/360_F_377485593_QHN6cjoNsNdOBoJNOwVRlFcHyZ0M9n3P.jpg"></img>
<br />
<form onSubmit={handleLogin}>
<label htmlFor="fname">Email</label>
<br />
<br />
<input
className="input"
type="email"
name="email"
placeholder='john123#gmail.com'
/>
<br />
<br />
<label htmlFor="lname">Password</label>
<br />
<br />
<input
className="input"
type="password"
id="lname"
name="password"
placeholder=''
/>
<br />
<br />
<button>Login</button>
</form>
<a href='/signup'>Signup</a>
</div>
</div>
);
}
export default Login;
My Code
You don't have an onChange method in your inputs. Check you are receiving your email in your state with a console.log first.
try this
<input
className="input"
type="email"
onChange={(e) => setEmail(e.target.value)}
name="email"
placeholder='john123#gmail.com'
/>
I'm making a simple resume portal and I have a textarea(1), in which user can write his/her work experience. To add more than one work experience I have set a button(Add) which basically will add a new textarea(similar to textarea(1) but without label) just below the textarea(1) and so on. This all should be done when button(Add) is clicked.
If I am able to add my code in a child component that would solve my problem I think.
Here's below what I tried:
Child component ( src -> Routes -> UserForm -> Components -> UserDetails -> index.js )
import React from 'react'
import './style.scss';
import { Row, Col } from 'react-bootstrap'
const UserDetails = () => {
return (
<>
<div className='UserDetails'>
<Row>
<Col lg='6'>
<div className='persnlInfo'>
<h4>
Personal Information
</h4>
<p>Your Name</p>
<input type="text" placeholder="Enter here" />
<p>Your Contact</p>
<input type="text" placeholder="Enter here" />
<p>Your Address</p>
<textarea className='formAddress' rows="5" cols="10" placeholder="Enter here" />
<p id='impLinks'>Important Links</p>
<p>Facebook</p>
<input type="text" placeholder="Enter here" />
<p>Instagram</p>
<input type="text" placeholder="Enter here" />
<p>Linkedin</p>
<input type="text" placeholder="Enter here" />
</div>
</Col>
<Col lg='6'>
<h4>
Professional Information
</h4>
<p>Objective</p>
<textarea className='formObjective' rows="5" cols="10" placeholder="Enter here" />
<p>Work Experience</p>
<textarea className='formObjective' rows="3" cols="10" placeholder="Enter here" />
<div className='addButton'>
<input type='button' id='addWrkExp' value='Add' />
</div>
</Col>
</Row>
</div>
</>
)
}
export default UserDetails;
Parent component ( src -> Routes -> UserForm -> index.js )
import React from 'react'
import Pages from '../../Components/HOC/Page/index'
import UserDetails from '../UserForm/Components/UserDetails/index'
class UserForm extends React.Component{
render() {
return(
<>
<Pages
showHeader
showFooter
>
<UserDetails />
</Pages>
</>
);
}
}
export default UserForm;
Output:
To obtain the said above, I've searched up on this but not getting What and Where to put logic/code exactly. If I'm not wrong this can be done using state , props , onClick() and/or something related.
I hope this is enough from my side to understand the problem. Thanks in advance for your help.
You can use a useState for the number of textareas on your page and then when button(add) gets clicked, that state gets increased by one,
This is your Child component ( src -> Routes -> UserForm -> Components -> UserDetails -> index.js )
import React, { useState } from 'react'
import './style.scss';
import { Row, Col } from 'react-bootstrap'
const UserDetails = () => {
const [ workXPs, setWorkXPs ] = useState(1);
return (
<>
<div className='UserDetails'>
<Row>
<Col lg='6'>
<div className='persnlInfo'>
<h4>
Personal Information
</h4>
<p>Your Name</p>
<input type="text" placeholder="Enter here" />
<p>Your Contact</p>
<input type="text" placeholder="Enter here" />
<p>Your Address</p>
<textarea className='formAddress' rows="5" cols="10" placeholder="Enter here" />
<p id='impLinks'>Important Links</p>
<p>Facebook</p>
<input type="text" placeholder="Enter here" />
<p>Instagram</p>
<input type="text" placeholder="Enter here" />
<p>Linkedin</p>
<input type="text" placeholder="Enter here" />
</div>
</Col>
<Col lg='6'>
<h4>
Professional Information
</h4>
<p>Objective</p>
<textarea className='formObjective' rows="5" cols="10" placeholder="Enter here" />
<p>Work Experience</p>
{[...Array(workXPs).keys()].map((workXP, i) => {
return <textarea key={i} className='formObjective' rows="3" cols="10" placeholder="Enter here" />;
})}
<div className='addButton'>
<input type='button' id='addWrkExp' value='Add' onClick={() => setWorkXPs(prev => (prev + 1))} />
</div>
</Col>
</Row>
</div>
</>
)
}
export default UserDetails;
if you wanna do more advanced and add remove buttons, check this: https://www.educative.io/blog/react-hooks-tutorial-todo-list
hope this helps 🙂
You could just make a state and change the state on the button click.
Then change the style according to the state.
Parent Component
import React from "react";
import Pages from "../../Components/HOC/Page/index";
import UserDetails from "../UserForm/Components/UserDetails/index";
class UserForm extends React.Component {
state = {
textAreas: [{ text: "" }]
};
addTextArea = () => {
let updatedTextArea = [...this.state.textAreas];
updatedTextArea.push({ text: "" });
this.setState({ textAreas: updatedTextArea });
};
render() {
return (
<>
<Pages showHeader showFooter>
<UserDetails textAreas={this.state.textAreas} clicked={this.addTextArea} />
</Pages>
</>
);
}
}
export default UserForm;
i changed <UserDetails textAreas={textAreas} clicked={this.addTextArea} /> to <UserDetails textAreas={this.state.textAreas} clicked={this.addTextArea} />
in the UserForm component
child Component
import React from 'react'
import './style.scss';
import { Row, Col } from 'react-bootstrap'
const UserDetails = (props) => {
const {textAreas, clicked} = props
return (
<>
<div className='UserDetails'>
<Row>
<Col lg='6'>
<div className='persnlInfo'>
<h4>
Personal Information
</h4>
<p>Your Name</p>
<input type="text" placeholder="Enter here" />
<p>Your Contact</p>
<input type="text" placeholder="Enter here" />
<p>Your Address</p>
<textarea className='formAddress' rows="5" cols="10" placeholder="Enter here" />
<p id='impLinks'>Important Links</p>
<p>Facebook</p>
<input type="text" placeholder="Enter here" />
<p>Instagram</p>
<input type="text" placeholder="Enter here" />
<p>Linkedin</p>
<input type="text" placeholder="Enter here" />
</div>
</Col>
<Col lg='6'>
<h4>
Professional Information
</h4>
<p>Objective</p>
<textarea className='formObjective' rows="5"
cols="10" placeholder="Enter here" />
<p>Work Experience</p>
{textAreas.map(item => (
<textarea className='formObjective' value=
{item.value} rows="3" cols="10" placeholder="Enter
here" />
)) }
<div className='addButton' onClick={clicked}>
<input type='button' id='addWrkExp' value='Add' />
</div>
</Col>
</Row>
</div>
</>
)
}
export default UserDetails;
I'm creating a Login form in react to check the login parameters, but when I run the code I'm thrown this exception:
Attempted import error: 'HelpBlock' is not exported from 'react-bootstrap'
import React, { Component } from "react";
import { Row, FormGroup, FormControl, Button, HelpBlock } from 'react-bootstrap';
import { isEmail, isEmpty, isLength, isContainWhiteSpace } from './validator';
class Login extends Component {
render() {
const { errors, formSubmitted } = this.state;
return (
<div className="Login">
<Row>
<form onSubmit={this.login}>
<FormGroup controlId="email" validationState={ formSubmitted ? (errors.email ? 'error' : 'success') : null }>
<FormControl type="text" name="email" placeholder="Enter your email" onChange={this.handleInputChange} />
{errors.email && <HelpBlock>{errors.email}</HelpBlock>}
</FormGroup>
</form>
</Row>
</div>
)
}
}
export default Login;
React bootstrap does not have a HelpBlock component.
I propose to show you errors in an Alert component, like so:
return (
<div className="Login">
<Row>
<form onSubmit={this.login}>
<FormGroup controlId="email" validationState={formSubmitted ? (errors.email ? 'error' : 'success') : null}>
{errors.email && <span className="text-danger">{errors.email}</span>}
<FormControl type="text" name="email" placeholder="Enter your email" onChange={this.handleInputChange} />
</FormGroup>
<FormGroup controlId="password" validationState={formSubmitted ? (errors.password ? 'error' : 'success') : null}>
{errors.password && <span className="text-danger">{errors.password}</span>}
<FormControl type="password" name="password" placeholder="Enter your password" onChange={this.handleInputChange} />
</FormGroup>
<Button type="submit" bsStyle="primary">Sign-In</Button>
</form>
</Row>
</div>
)
What is the best (and simplest) way to require inputs (name, email, content etc.) in React.js. I have searched for quite a while but there seems to be so many varying no-so-clear ways to do this. Ideally I want the inputs user_name, user_email and message to be require in order for the form to be sent successfully. Any help would be appreciated.
import React from 'react';
import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBIcon } from 'mdbreact';
import NavBar from "./NavBar";
import Footer from "./Footer";
import emailjs from 'emailjs-com';
import{ init } from 'emailjs-com';
function Contact() {
function sendEmail(e) {
e.preventDefault();
emailjs.sendForm('hidden', 'hidden', e.target, 'hidden')
.then((result) => {
alert("Great, your request has been sent!");
}, (error) => {
alert("Oops, something went wrong. Please try again")
});
e.target.reset();
}
return (
<div>
<NavBar />
<br />
<br />
<br />
<br />
<br />
<MDBContainer>
<MDBRow className = "formcontainer">
<MDBCol md="6">
<form onSubmit={sendEmail}>
<p className="h4 text-center mb-4">Fill in the information below to contact me!</p>
<br />
<label htmlFor="defaultFormContactNameEx" className="grey-text" > Your name </label>
<input type="text" id="defaultFormContactNameEx" className="form-control" name="user_name" />
<br />
<label htmlFor="defaultFormContactEmailEx" className="grey-text"> Your email </label>
<input type="email" id="defaultFormContactEmailEx" className="form-control" name="user_email"/>
<br />
<label htmlFor="defaultFormContactSubjectEx" className="grey-text"> Subject</label>
<input type="text" id="defaultFormContactSubjectEx" className="form-control" name="user_subject" />
<br />
<label htmlFor="defaultFormContactMessageEx" className="grey-text"> Your message </label>
<textarea type="text" id="defaultFormContactMessageEx" className="form-control" rows="7" name="message"/>
<div className="text-center mt-4">
<MDBBtn color="warning" outline type="submit">
Send
<MDBIcon far icon="paper-plane" className="ml-2" />
</MDBBtn>
</div>
</form>
</MDBCol>
</MDBRow>
</MDBContainer>
<br />
<br />
<Footer />
</div>
);
};
export default Contact;
The easier way to do that is using the required attribute in each of the form's elements.
i.e:
<input required type="email" id="defaultFormContactEmailEx" className="form-control" name="user_email"/>
You can absolutely check if all inputs are not empty when submiting the form too
More info about the required attribute here
I am working on a user sign up page and I want to have the user confirm their password after they enter it in. I am trying to access a specific field component's "meta.touched" property from within the form jsx. I have a renderField method that I can use to access it within that function, but I am not able to get to it outside of that. I am trying to have a third field appear after the password field component has been touched. How would I access that?
for example
<Field
label="Please enter an email for you account"
name="email"
type="text"
component={this.renderField}
/>
<Field
label="Please enter a password for your account"
name="password"
type="password"
component={this.renderField}
/>
{if(password.meta.touched == true) &&
<Field
label="Please confirm your password"
name="passwordConfirm"
type="password"
component={this.renderField}
/>}
here is the full component:
import React, {Component} from 'react';
import { Field, reduxForm } from 'redux-form';
import {connect} from 'react-redux';
import * as actions from '../../actions';
import '../../style/signup.css';
class SignUp extends Component {
renderAlert(){
if(this.props.errorMessage){
return(
<div className="alert alert-danger error-message">
<strong>Oops!</strong>
<h6 className="invalid">{this.props.errorMessage}</h6>
</div>
)
}
}
renderField(field){
return(
<div className="form-group">
<label>{field.label}</label>
<input
className="form-control"
type={field.type}
{...field.input}
/>
<div className="invalid">
{field.meta.touched ? field.meta.error: ''}
</div>
</div>
);
}
handleFormSubmit({email, password}){
this.props.signUpUser({email, password});
}
render(){
const {handleSubmit} = this.props;
return(
<div className="container sign-up-form jumbotron">
<h4>Sign Up</h4>
<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
<Field
label="Please enter an email for you account"
name="email"
type="text"
component={this.renderField}
/>
<Field
label="Please enter a password for your account"
name="password"
type="password"
component={this.renderField}
/>
<Field
label="Please confirm your password"
name="passwordConfirm"
type="password"
component={this.renderField}
/>
{this.renderAlert()}
<button action='submit' className="btn btn-success">
Sign Up <i className="fas fa-user-plus"></i>
</button>
</form>
</div>
)
}
}
function validate(values){
//this function will be called for us
//values is an object that has values user has entered into form
const errors = {};
//if errors has any properties, redux forms assumes
//it is invalid
if(!values.email){
errors.email="Please enter an email to sign up";
}
if(!values.password){
errors.password="Please enter a password to sign up";
}
if(!values.passwordConfirm){
errors.passwordConfirm="Please confirm your password";
}
if(values.password !== values.passwordConfirm){
errors.passwordConfirm="Passwords dont match, please confirm";
}
return errors;
}
function mapStateToProps(state){
return {
errorMessage: state.auth.error
};
}
export default reduxForm({
validate,
form: 'signup'
})(
connect(mapStateToProps, actions)(SignUp)
);
I think the getFormMeta selector will help you here. You can add it to your mapStateToProps:
import { getFormMeta } from 'redux-form';
function mapStateToProps(state) {
return {
errorMessage: state.auth.error,
meta: getFormMeta('signup')(state)
};
}
Docs reference