Hello I'm creating a login form in react, to check the login parameters use Checkbel of the package, but when I run the code I'm thrown this exception: ./src/App.js Attempted import error: 'ControlLabel' is not exported from 'react-bootstrap'. how do I solve?
React Code:
import React, { Component } from "react";
import { Form,Button, FormGroup, FormControl, ControlLabel } from "react-bootstrap";
import "./Login.css";
import Bootstrap from "react-bootstrap";
export default class Login extends Component {
constructor(props) {
super(props);
this.state = {
email: "",
password: ""
};
}
validateForm() {
return this.state.email.length > 0 && this.state.password.length > 0;
}
handleChange = event => {
this.setState({
[event.target.id]: event.target.value
});
}
handleSubmit = event => {
event.preventDefault();
}
render() {
return (
<div className="Login">
<form onSubmit={this.handleSubmit}>
<FormGroup controlId="email" bsSize="large">
<ControlLabel>Email</ControlLabel>
<FormControl
autoFocus
type="email"
value={this.state.email}
onChange={this.handleChange}
/>
</FormGroup>
<FormGroup controlId="password" bsSize="large">
<ControlLabel>Password</ControlLabel>
<FormControl
value={this.state.password}
onChange={this.handleChange}
type="password"
/>
</FormGroup>
<Button
block
bsSize="large"
disabled={!this.validateForm()}
type="submit"
>
Login
</Button>
</form>
</div>
);
}
}
Try FormLabel instead of ControlLabel.
<ControlLabel> is from an older version of react-bootstrap. The current version ("react-bootstrap": "^1.4.3") uses <FormLabel> or <Form.Label>
According to this url https://react-bootstrap.github.io/components/buttons/#button-props and your version you should modify your code like this.
import React, { Component } from "react";
import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button'
import Bootstrap from "react-bootstrap";
export default class Login extends Component {
constructor(props) {
super(props);
this.state = {
email: "",
password: ""
};
}
validateForm() {
return this.state.email.length > 0 && this.state.password.length > 0;
}
handleChange = event => {
this.setState({
[event.target.id]: event.target.value
});
}
handleSubmit = event => {
event.preventDefault();
}
render() {
return (
<div className="Login">
<Form onSubmit={this.handleSubmit}>
<Form.Group controlId="email" bsSize="large">
<Form.Control
autoFocus
type="email"
value={this.state.email}
onChange={this.handleChange}
/>
</Form.Group>
<Form.Group controlId="password" bsSize="large">
<Form.Control
value={this.state.password}
onChange={this.handleChange}
type="password"
/>
</Form.Group>
<Button
block
bsSize="large"
disabled={!this.validateForm()}
type="submit"
>
Login
</Button>
</Form>
</div>
);
}
}
This "react-bootstrap": "^1.0.0-beta.16", doesn't contain the ControlLabel, so
uninstall it using
npm uninstall react-bootstrap
and then re install with this "react-bootstrap": "^0.32.4" version
npm install react-bootstrap#0.32.4 --save
will definitely fix this issue
Related
first of all I am a very beginner at React.js. I am creating my super simple static code which has to login the user by the credentials provided in the state and redirect to homepage. But for some reason it doesn't work and doesn't redirect me to the homepage, which has the route of '/', btw my Login route is '/login'. I would appreciate any help. Here is my code:
import React from 'react';
import TextField from '#material-ui/core/TextField';
import { makeStyles } from '#material-ui/core/styles';
import Typography from '#material-ui/core/Typography';
import Container from '#material-ui/core/Container';
import Button from '#material-ui/core/Button';
import HomePage from './HomePage';
import { Redirect } from 'react-router-dom';
class LoginPage extends React.Component {
constructor(props) {
super(props);
this.state = {
loginData: {
username: 'test',
password: 'test'
},
errors: {}
};
this.buttonClickHandle = this.buttonClickHandle.bind(this);
this.loginHandle = this.loginHandle.bind(this);
}
loginHandle(event) {
let field = event.target.name;
let value = event.target.value;
let loginData = this.state.loginData;
loginData[field] = value;
this.setState({loginData: loginData});
}
buttonClickHandle(event) {
event.preventDefault();
if ( this.state.loginData.username === this.target.username) {
console.log("User exists. Go to the login page");
return <Redirect to="/"/>
} else {
console.log("User doesn't exists. Show error message");
}
}
render() {
return (
<div className="loginPage">
<Container maxWidth="sm">
<h2>Login</h2>
<form noValidate autoComplete="off" onChange={this.loginHandle}>
<div className="loginForm">
<TextField
required
id="outlined-required"
label="E-mail"
variant="outlined"
placeholder="Your e-mail..."
className="loginInput"
/>
<TextField
required
id="outlined-password-input"
label="Password"
type="password"
autoComplete="current-password"
variant="outlined"
placeholder="Your password..."
className="loginInput"
/>
<Button
variant="contained"
color="primary"
onClick={this.buttonClickHandle}
>
Login
</Button>
</div>
</form>
</Container>
</div>
)
}
}
export default LoginPage
There are some things that look off in your code.
There is no onChange prop in forms only onSubmit
The button should trigger the onSubmit function, this is done by setting the type of the button as submit
To get the input values from the form you need to put a name and get them as event.target.name.value inside the onSubmit function
here is a working example of your code
class LoginPage extends React.Component {
constructor(props) {
super(props);
this.state = {
loginData: {
username: "test",
password: "test"
},
errors: {}
};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
if (
this.state.loginData.username === event.target.username.value &&
this.state.loginData.password === event.target.password.value
) {
console.log("User exists. Go to the login page");
return <Redirect to="/" />;
} else {
console.log("User doesn't exists. Show error message");
}
}
render() {
return (
<div className="loginPage">
<Container maxWidth="sm">
<h2>Login</h2>
<form noValidate autoComplete="off" onSubmit={this.handleSubmit}>
<div className="loginForm">
<TextField
required
name="username"
id="outlined-required"
label="E-mail"
variant="outlined"
placeholder="Your e-mail..."
className="loginInput"
/>
<TextField
required
name="password"
id="outlined-password-input"
label="Password"
type="password"
autoComplete="current-password"
variant="outlined"
placeholder="Your password..."
className="loginInput"
/>
<Button variant="contained" color="primary" type="submit">
Login
</Button>
</div>
</form>
</Container>
</div>
);
}
}
export default LoginPage;
I am not finding good docs or videos on how to get data from my inputs with React-Bootstrap. I want to be able to click the button and then bring what I typed into the input box into my onClick function.
import React from "react";
import Button from 'react-bootstrap/Button';
import './Search.css';
import InputGroup from 'react-bootstrap/InputGroup';
import FormControl from 'react-bootstrap/FormControl';
class search extends React.Component {
constructor(props){
super(props);
this.text = React.createRef();
this.searchChar = this.searchChar.bind(this);
}
searchChar = () => {
console.log("Button Clicked")
const value = this.input.current.value;
console.log(value)
}
render() {
return (
<div className="searchBar">
<form>
<InputGroup className="mb-3">
<InputGroup.Prepend>
<InputGroup.Text id="basic-addon1">Character Search</InputGroup.Text>
</InputGroup.Prepend>
<FormControl ref = {this.input}
placeholder="Character Name"
aria-label="Character Name"
aria-describedby="basic-addon1"
/>
</InputGroup>
<Button onClick={this.searchChar(this.input)} variant="outline-danger">Search </Button>
</form>
</div>
);
}
}
export default search;
Just try to write your input values in state
for example;
import React from "react";
import Button from 'react-bootstrap/Button';
import './Search.css';
import InputGroup from 'react-bootstrap/InputGroup';
import FormControl from 'react-bootstrap/FormControl';
class search extends React.Component {
constructor(props){
super(props);
this.state = {
basicAddon1 : null,
};
}
searchChar = () => {
console.log("Button Clicked")
const value = this.state.basicAddon1;
console.log(value)
}
render() {
return (
<div className="searchBar">
<form>
<InputGroup className="mb-3">
<InputGroup.Prepend>
<InputGroup.Text id="basic-addon1">Character Search</InputGroup.Text>
</InputGroup.Prepend>
<FormControl
placeholder="Character Name"
aria-label="Character Name"
aria-describedby="basic-addon1"
onChange={event => {
this.setState({
basicAddon1 : event.target.value
});
}}
value={this.state.basicAddon1 ? this.state.basicAddon1 : ""}
/>
</InputGroup>
<Button onClick={this.searchChar(this.input)} variant="outline-danger">Search </Button>
</form>
</div>
);
}
}
export default search;
you can create inputChangeHandler function or something else for improve your code
it just basic
The same way you deal with getting data from a form in pure React, you do with react-bootstrap. This answer here shows many options to do so.
My favourite approach among those options is this one. Using that approach your code would be something like:
class search extends React.Component {
constructor(props) {
super(props)
this.handleSave = this.handleSave.bind(this)
}
onChange(event) {
// Intended to run on the change of every form element
event.preventDefault()
this.setState({
[event.target.name]: event.target.value,
})
}
handleSave() {
console.log(`Do something with : {this.state.characterName}`)
}
render() {
return (
<div className="searchBar">
<form>
<InputGroup className="mb-3">
<InputGroup.Prepend>
<InputGroup.Text id="basic-addon1">
Character Search
</InputGroup.Text>
</InputGroup.Prepend>
<FormControl
name="characterName"
placeholder="Character Name"
aria-label="Character Name"
aria-describedby="basic-addon1"
onChange={this.onChange.bind(this)}
/>
</InputGroup>
<Button onClick={this.handleSave} variant="outline-danger">
Search{' '}
</Button>
</form>
</div>
)
}
}
Am new in React and trying to define PropTypes, but seems it's no longer working :
Below is how I was working with it :
React.PropTypes.func.isRequired
Below is the error am getting :
Then this is the component am having what am I missing :
import React, {Component} from 'react';
import {Input,Icon,Row,Card, Button} from 'react-materialize'
import '../css/signup.css'
import PropTypes from 'prop-types';
class SignUpForm extends Component {
constructor(props) {
super(props);
this.state = {username: '', email:'', password:'', confirm_password:''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({username: event.target.username});
this.setState({email: event.target.email});
this.setState({password: event.target.password});
this.setState({confirm_password: event.target.confirm_password});
}
handleSubmit(event) {
event.preventDefault();
this.props.userSignUpRequest(this.state);
}
render() {
return (
<div>
<Card className="card-effects right">
<form className="card-form-signup" onSubmit={this.handleSubmit}>
<Row>
<label className="signup-header"><b>Signup to Authors Haven</b></label>
</Row>
<Row>
<Input s={12} placeholder="Username" value={this.state.username} onChange={this.handleChange} validate>
<Icon className="icon-styles">account_box</Icon></Input>
</Row>
<Row>
<Input s={12} type='email' value={this.state.email} onChange={this.handleChange} placeholder="Email" validate><Icon className="green darken-4">email</Icon></Input>
</Row>
<Row>
<Input s={12} type='password' placeholder="Password" value={this.state.password} onChange={this.handleChange} validate>
<Icon className="icon-styles">vpn_key</Icon></Input>
</Row>
<Row>
<Input s={12} type='password' placeholder="Confirm password" value={this.state.confirm_password} onChange={this.handleChange} validate>
<Icon className="icon-styles">vpn_key</Icon></Input>
</Row>
<Row>
<label >Already have an account ? </label>
</Row>
<Row>
<Button className='button-effects' type="submit" value="Submit" > Signup </Button>
</Row>
</form>
</Card>
</div>
);
}
}
SignUpForm.propTypes = {
userSignUpRequest: React.PropTypes.func.isRequired
}
export default SignUpForm;
Depending on your React version PropTypes might be in a different package: https://www.npmjs.com/package/prop-types
import PropTypes from 'prop-types';
SignUpForm.propTypes = {
userSignUpRequest: PropTypes.func.isRequired
}
As the documentation states,
React.PropTypes has moved into a different package since React v15.5. Please use the prop-types library instead.
It's already imported:
import PropTypes from 'prop-types';
While the component still uses React.PropTypes.
It should be:
SignUpForm.propTypes = {
userSignUpRequest: PropTypes.func.isRequired
}
Am trying to run enzyme tests but am facing this error,
Invariant Violation: Could not find "store" in either the context or
props of "Connect(Signup)". Either wrap the root component in a
, or explicitly pass "store" as a prop to "Connect(Signup)".
I used Redux in my application and it runs well in the browser but fails to run tests in enzyme and jest.
Below is my code :
For the test file below is the code in App.test.js.
import React from 'react';
import ReactDOM from 'react-dom';
import App from '../App'
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
Signup.js
import React, { Component } from 'react';
import NavBar from './subcomponents/NavBar'
import SignUpForm from './subcomponents/SignUpForm'
import { connect } from 'react-redux'
import {userSignUpRequest} from "./actions/signUpActions";
import PropTypes from 'prop-types';
class Signup extends Component {
render() {
const {userSignUpRequest} = this.props;
return (
<div>
<NavBar/>
<SignUpForm userSignUpRequest={userSignUpRequest}/>
</div>
);
}
}
Signup.propTypes = {
userSignUpRequest: PropTypes.func.isRequired
}
export default connect(null, { userSignUpRequest })(Signup);
SignUpForm.js
import React, {Component} from 'react';
import {Input, Icon, Row, Card, Button, ProgressBar, Col, Preloader} from 'react-materialize'
import '../css/signup.css'
import PropTypes from 'prop-types';
class SignUpForm extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
email:'',
password:'',
confirm_password:'',
visible: true
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
const {name,value} = event.target;
this.setState({[name]: value});
}
handleSubmit(event) {
event.preventDefault();
console.log('my state ', this.state);
this.setState({visible: true});
if(this.state.password.trim() === this.state.confirm_password.trim()) {
this.props.userSignUpRequest(this.state);
}
else{
alert('No they don\'t match');
this.setState({visible: true});
}
}
componentDidMount() {
console.log('Parent did mount.');
document.getElementById('text_message').style.visibility = "hidden";
this.setState({visible: false});
}
render() {
const isVisible = this.state.visible;
return (
<div>
<Card className="card-effects right">
{isVisible && <ProgressBar id="progress_Bar" name="progress_Bar"/>}
<Row>
<label className="text-message" id="text_message" name="text_message"><i>text message</i></label>
</Row>
<form className="card-form-signup" onSubmit={this.handleSubmit}>
<Row>
<label className="signup-header"><b>Signup to Authors Haven</b></label>
</Row>
<Row>
<Input s={12} placeholder="Username" name="username" value={this.state.username} onChange={this.handleChange} validate>
<Icon className="icon-styles">account_box</Icon></Input>
</Row>
<Row>
<Input s={12} type='text' name="email" value={this.state.email} onChange={this.handleChange} placeholder="Email" validate><Icon className="green darken-4">email</Icon></Input>
</Row>
<Row>
<Input s={12} type='password' name="password" placeholder="Password" value={this.state.password} onChange={this.handleChange} validate>
<Icon className="icon-styles">vpn_key</Icon></Input>
</Row>
<Row>
<Input s={12} type='password' name="confirm_password" placeholder="Confirm password" value={this.state.confirm_password} onChange={this.handleChange} validate>
<Icon className="icon-styles">vpn_key</Icon></Input>
</Row>
<Row>
<label >Already have an account ? </label>
</Row>
<Row>
<Button className='button-effects' type="submit" value="Submit" > Sign up </Button>
</Row>
</form>
</Card>
</div>
);
}
}
SignUpForm.propTypes = {
userSignUpRequest: PropTypes.func.isRequired
}
export default SignUpForm;
In test you'll still need to mount the components inside a <Provider> so that all usages of connect() downstream of App can work properly.
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, div);
I have the following login.js
import React, { Component, PropTypes } from 'react';
import { Button, Form, FormControl, FormGroup } from 'react-bootstrap';
export default class Login extends Component {
render() {
const {errorMessage} = this.props
return (
<Form inline>
<FormGroup controlId="formInlineEmail">
<FormControl type="email" ref="username" placeholder="Email"/>
</FormGroup>
<FormGroup controlId="formInlinePassword">
<FormControl type="password" ref="password"/>
</FormGroup>
<Button type="submit" onClick={(event) => this.handleClick(event)}>
Login
</Button>
{errorMessage &&
<p style={{color:'red'}}>{errorMessage}</p>
}
</Form>
)
}
handleClick(event) {
const username = this.refs.username
const password = this.refs.password
const creds = { username: username.value.trim(), password: password.value.trim() }
this.props.onLoginClick(creds)
}
}
Login.propTypes = {
onLoginClick: PropTypes.func.isRequired,
errorMessage: PropTypes.string
}
When attempting to login I get the following error:
Uncaught TypeError: (0, _reactDom2.default) is not a function at Login.handleClick
if I avoid using react-bootstrap and do the following in my Login.js it works fine.
<div>
<input type='text' ref='username' className="form-control" style={{ marginRight: '5px' }} placeholder='Username'/>
<input type='password' ref='password' className="form-control" style={{ marginRight: '5px' }} placeholder='Password'/>
<button onClick={(event) => this.handleClick(event)} className="btn btn-primary">
Login
</button>
{errorMessage &&
<p style={{color:'red'}}>{errorMessage}</p>
}
</div>
Don't ask why but this works:
import React, { Component, PropTypes } from 'react';
import { findDOMNode } from 'react-dom';
import { Button, ControlLabel, Form, FormControl, FormGroup } from 'react-bootstrap';
export default class Login extends Component {
handleSubmit(event) {
const username = findDOMNode(this.refs.username)
const password = findDOMNode(this.refs.password)
const creds = { username: username.value.trim(), password: password.value.trim() }
this.props.onLoginClick(creds)
}
render() {
const {errorMessage} = this.props
return (
<Form inline>
<FormGroup controlId="formHorizontalEmail">
<ControlLabel>Email </ControlLabel>
<FormControl type="username" ref="username" onChange={this.handleChange} placeholder="Email" />
</FormGroup>
<FormGroup controlId="formHorizontalPassword">
<ControlLabel>Password </ControlLabel>
<FormControl type="password" ref="password" onChange={this.handleChange} placeholder="Password" />
</FormGroup>
<Button onClick={(event) => this.handleSubmit(event)}>Login</Button>
{errorMessage &&
<p style={{color:'red'}}>{errorMessage}</p>
}
</Form>
)
}
}
Login.propTypes = {
onLoginClick: PropTypes.func.isRequired,
errorMessage: PropTypes.string
}