I'm working on a project with my classmates, but while trying to load this page in react I get the error: "Expected an assignment or function call and instead saw an expression" that's appeared on several of her pages. I looked into it and it seems to be a warning that ES Lint throws out, but I'm unsure of how to fix it for my particular issue. Any help would be appreciated.
Code Snippet::
import React from "react";
import './LoginPage.css';
import GlobalNav from '../../components/GlobalNav';
import GlobalFooter from '../../components/GlobalFooter/GlobalFooter';
const LoginPage = props => {
<div>
<GlobalNav />
<h1 className="uk-text-center blueText">login</h1>
<div className="uk-container"/>
<form className="authorForm uk-width-1-2#m uk-align-center uk-form-stacked">
<p className="uk-text-lead">Login and add some Highlights of your own.</p>
<p className="uk-text-center redText"><span uk-icon="bolt"></span></p>
<fieldset className="uk-fieldset">
<div className="form-group">
<div className="uk-margin">
<label className="uk-form-label" for="form-stacked-select">* Email:</label>
<div className="uk-inline uk-width-1-1">
<span className="uk-form-icon uk-form-icon-flip blueText" uk-icon="icon: world"></span>
<input className="uk-input" id="email" name="email" type="text"></input>
</div>
</div>
<div className="uk-margin">
<label className="uk-form-label" for="form-stacked-select">* Password:</label>
<div className="uk-inline uk-width-1-1">
<span className="uk-form-icon uk-form-icon-flip blueText" uk-icon="icon: lock"></span>
<input className="uk-input" id="password" name="password" type="text"></input>
</div>
</div>
<button className="uk-button uk-button-secondary redText uk-align-center" id="submit-btn"><span uk-icon="user"></span> login</button>
</div>
</fieldset>
</form>
<GlobalFooter />
</div>
}
export default LoginPage;
You forgot to enclose them in a return statement.
const LoginPage = props => {
// this is where you put your logic if needed before returning JSX codes
return (
<div>
// ...rest of the codes
</div>
);
};
or, you can simply do this, since you're using ES6 arrow function:
const LoginPage = props => (
<div>
// ...rest of the code
</div>
);
Related
This question already has an answer here:
Uncaught TypeError: Cannot read properties of undefined (reading 'pathname') and The above error occurred in the <Link> component:
(1 answer)
Closed 6 months ago.
when I add Link tag in the component Login the page content disappears, what might be the problem?
Login.js (without Link tag):
import React from 'react'
import { Link } from 'react-router-dom'
function Login() {
return (
<div className='container mx-auto'>
<form className='col-md-5 mx-auto'>
<h2 className='m-5'>Login into MERN Project</h2>
<div className="mb-3">
<label for="exampleInputEmail1" className="form-label">Email address</label>
<input type="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" required/>
<div id="emailHelp" className="form-text">We'll never share your email with anyone else.</div>
</div>
<div className="mb-3">
<label for="exampleInputPassword1" className="form-label">Password</label>
<input type="password" className="form-control" id="exampleInputPassword1" required/>
</div>
<button type="submit" className="btn btn-primary">Submit</button>
</form>
<nav>
</nav>
</div>
)
}
export default Login
Output:
enter image description here
Login.js with Link tag:
import React from 'react'
import { Link } from 'react-router-dom'
function Login() {
return (
<div className='container mx-auto'>
<form className='col-md-5 mx-auto'>
<h2 className='m-5'>Login into MERN Project</h2>
<div className="mb-3">
<label for="exampleInputEmail1" className="form-label">Email address</label>
<input type="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" required/>
<div id="emailHelp" className="form-text">We'll never share your email with anyone else.</div>
</div>
<div className="mb-3">
<label for="exampleInputPassword1" className="form-label">Password</label>
<input type="password" className="form-control" id="exampleInputPassword1" required/>
</div>
<button type="submit" className="btn btn-primary">Submit</button>
</form>
<nav>
<Link className=''>Not a member? Register here</Link>
</nav>
</div>
)
}
export default Login
The output is empty page:
enter image description here
In Link Component add link destination..
<Link to="/register" > Not a member? Register here</Link>
I was developing a react project and I was making a form and I ran into an error that I didn't know what was causing it
The Error:
Unterminated JSX contents (25:10)
23 | </a>
24 | <form />
> 25 | </div>
| ^
26 | );
27 | }
28 |
My Code:
import React, { Component} from "react";
let Form = () => {
return (
<div className="log">
<h2>Login</h2>
<form>
<div className="user-box">
<input type="text" required="" />
<label>Username</label>
</div>
<div className="user-box">
<input type="password" required="" />
<label>Password</label>
<div />
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Submit
</a>
<form />
</div>
);
}
export default Form;
I tried to remove the parent div but it throwed me an error so I added them back
I also looked up on some another questions but all I got was missing /
Kindly Help
Yes I got it to work after doing a bit of researchon the difference between <div/> and </div>
<div/> would be for a single tag or something like <input /> and <image />
So I changed all of the <div/> to the proper one
Code now:
import React, { Component} from "react";
let Form = () => {
return (
<div className="log">
<h2>Login</h2>
<form>
<div className="user-box">
<input type="text" required="" />
<label>Username</label>
</div>
<div className="user-box">
<input type="password" required="" />
<label>Password</label>
</div>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Submit
</a>
</form>
</div>
);
}
export default Form;
I think you need to fix your div closing tag.
<div className="user-box">
<input type="password" required="" />
<label>Password</label>
**<div />**
In react you need to wrap multiple component with a parent component, using <div/> means you are closing the component in the same line and thus it's throws an error because components are not wrapped by parent div you should be using <div> ....</div>
Please help me resove the errors in the following code. I have tried several times but top avail.
import React from "react";
export class Login extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="base-container">
<div className="header">Login</div>
<div className="content"></div>
<div className="form">
<div className="form-group">
<label htmlFor="username">Username</label>
<input type="text" name="username" placeholder="username" />
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input type="password" name="password" placeholder="password" />
</div>
</div>
<div className='footer'>
<button type="button" className="btn">
Login
</button>
</div>
);
}
}
error:
Unexpected token. Did you mean `{'{'` or `&brace;`?
enter image description here
your footer div is not closed. Please close that </div>
I am working on a React project in that project I have a form, In that form I am trying to do
Validation for an email address, but I don't know how to apply all these.
What I am expecting is, In input tag if I type mark, then If I go to another Input tag it has to
Show me some kind of message above Input tag like this, please enter a valid email address.
This is Form.js
import React from 'react';
import './Form.css';
const Form = () => {
const validation = (email) => {
const result = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return result.test(String(email).toLowerCase());
}
return (
<div className='container'>
<div className='row'>
<div className='col-4'>
<div className='mainForm'>
<form>
<div className="form-group">
<label htmlFor="exampleInputEmail1">Email address</label>
<input type="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
</div>
<div className="form-group">
<label htmlFor="exampleInputPassword1">Password</label>
<input type="password" className="form-control" id="exampleInputPassword1" />
</div>
<button type="submit" className="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
)
}
export default Form
I think those are basic problem in all JS code base, you need to catch the input event, using onChange, onBlur, On...etc and bind those event to your react class, like
return <input type=”email” name=”email” value={this.state.email}
onChange={this.handleChange.bind(this)}/>
then on the handleChange you can call the email validation
handleChange(event){
var email = event.target.value;
// do what ever you want
validation(email);
}
I am using react-redux-firebase for authentication and user management.Once users login, I want to navigate the user to their dashboard with an url of 'dahboard/userId.' When the user authenticate firebase gives us a response that has the user's ID there. The problem is when I attempt to complete a nav request via 'this.history.push('dahsboard/uid') I keep getting an error that says 'this' is undefined. I'm pretty sure it is a scoping issue but I cannot figure out exactly how I need to structure the code to solve the problem.
I have already tried to store the uid as a const. I have also tried chaining another async funciton to the request. Either this.props is undefined or the uid is undefined.
onSubmit = (e) => {
e.preventDefault();
// this.props.signIn(this.state);
this.props.firebase.login(this.state)
.then(function(res){
const userId = res.user.user.uid;
console.log(userId);
this.props.push('/dashboard/userId');
// ! Scoping issue - How to get 'props' in or userId out of this scope
})
.catch(
err => console.log(err.message),
)
}
render() {
const authError = this.props.authError;
return(
<div className="container">
<div className="row">
<div className="col-sm-9 col-md-7 col-lg-5 mx-auto">
<div className="card card-signin my-5">
<div className="card-body">
<div className = "red-text center">
{authError ? <p> {authError.message} </p> : null}
</div>
<h5 className="card-title text-center">Sign In</h5>
<form className="form-signin" onSubmit={this.onSubmit}>
<div className="form-label-group">
<label>Email address
<input type="email" id="inputEmail" className="form-control" placeholder="Email address" value={this.state.email} onChange={this.onChangeEmail} required autoFocus />
</label>
</div>
<div className="form-label-group">
<label>Password
<input type="password" id="inputPassword" className="form-control" placeholder="Password"
value={this.state.password}
onChange={this.onChangePassword}
required />
</label>
</div>
<div className="custom-control custom-checkbox mb-3">
<input type="checkbox" className="custom-control-input" id="customCheck1" />
<label className="custom-control-label" >Remember password
</label>
</div>
<button className="btn btn-lg btn-primary btn-block text-uppercase" type="submit">Sign in</button>
<hr className="my-4" />
</form>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default compose(
//map firebase redux to props
firebaseConnect((props) => {
}),
connect(
//map redux-state to props
(state) => ({
userId: state.firebase.auth.uid,
authError: state.firebase.authError,
auth: state.firebase.auth
})
)
)(Login)
You need to use withRouter from "react-router" like so:
export default withRouter(connect(mapStateToProps, {
...
})(App));
Then it will be accessible through this.props;
You can also pass history through props from App if you have a nested component like so:
<NestedComponent history={this.props.history}/>