i made a react web app , it should hide the navigation bar on login page then it should reappear after a successful login in all other other pages. The way i made the header hidden in login page is by making a function , but the login button is located in another page (Authen.js) and the function is located in App.js my problem is that i can't call the function from the first page to the other .
./src/App.js
Line 69: 'operation' is not defined no-undef
import React, { Component } from 'react';
import './App.css';
import Authen from './Pages/Authen'
import Home from './Pages/Home';
import secondpage from './Pages/secondpage';
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom';
var firebase = require('firebase');
class App extends Component {
constructor(props){
super(props);
this.state = {
ShowMe:false
};
}
operation(){
this.setState({
ShowMe:true
})
}
render(){
return(
<div>
<Router >
<div>
<div>
{
this.state.ShowMe?
<ul>
<li><Link to="/Home">Home</Link></li>
<li><Link to="/secondpage">secondpage</Link></li>
</ul>
:null
}
</div>
<Route exact path="/" component={Authen}/>
<Route path="/Home" component={Home}/>
<Route path="/secondpage" component={secondpage}/>
</div>
</Router>
</div>
);
}
}
export default App;
the login page :
import React, {Component} from 'react';
import {withRouter} from 'react-router-dom'
import {operation} from '../App'
var firebase = require('firebase');
class Authen extends React.Component {
Login = () => {
//login method
const email = this.refs.email.value;
const password = this.refs.password.value;
console.log(email,password);
const auth = firebase.auth();
const promise = auth.signInWithEmailAndPassword(email, password);
promise.catch(e =>{
var err = e.message;
console.log(err);
this.setState({err: err});
});
//gets user uid
firebase.auth().onAuthStateChanged((user) => {
if (user) {
console.log(user.uid);
this.props.history.push('/Home');
operation();
}
});
}
constructor(props){
super(props);
this.state = {
err:''
};
this.Login = this.Login.bind(this);
}
render(){
return(
<div className="login_div">
<div className="main-div">
<h3>N.N.NASSAR</h3>
<input ref="email" type="email" placeholder="Email..." id="email_field" />
<input ref="password" type="password" placeholder="Password..." id="password_field" />
<p>{this.state.err}</p>
<button onClick={() => this.Login() || this.operation()} id="Login"> Login </button>
<button onClick={this.signup}>Sign Up</button>
</div>
</div>
);
}
}
export default withRouter(Authen);
thank you for your time :)
If I understand your question, you want to call the 'operation' method of App from another component, and the reason you want to do that is because you want to set App's state from both App and from the other component.
One simple way to do it is by using redux and accessing the global state in the redux store, where you will save the state that you want to updare from both components.
Related
I have a Smart component class page PhoneDirectory.js, where I have used BrowserRouter and Route to route to the ShowSubscribers page("/") and AddSubscribers page ("/add"). My requirement is to redirect to the ShowSubscribers page("/") upon form submission on the AddSubscribers page but not understand how to implement that. I tried using this.props.history.push("/") but it isn't working. I am new to React, can anyone please help?
import React from 'react';
import AddSubscriber from './AddSubscriber';
import ShowSubscribers from './ShowSubscribers';
import {BrowserRouter , Route, Routes} from 'react-router-dom';
export default class PhoneDirectory extends React.Component{
constructor(){
super();
this.state = {[]};
}
addSubscribers = (subscribers) =>{...}
deleteSubscribers = (subscriberId) =>{...}
render() {
return (
<BrowserRouter>
<Routes>
<Route exact path='/' element={<ShowSubscribers deleteSubscribers={this.deleteSubscribers} subscribersList={this.state.subscribersList}/>}/>
<Route exact path='/add' element={<AddSubscriber addSubscribers={this.addSubscribers}/>}/>
</Routes>
</BrowserRouter>
)
}
}
Dumb component AddSubscriber page
import React from 'react';
import Header from './Header';
import './AddSubscriber.css';
import {Link} from "react-router-dom";
export default class AddSubscriber extends React.Component {
constructor() {
super();
this.state = {
id: 0,
name:'',
phone:''
}
}
onChangeHandler = (event) =>{...}
onFormSubmitted = (event) =>{
event.preventDefault();
this.props.addSubscribers(this.state);
this.setState({id:0, name:"", phone:''});
// Need logic to redirect to "/" i.e., ShowSubscribers page
}
render() {
return (<div>
<Header heading="Add Subscriber"/>
<div className="component-body-container">
<Link to="/">
<button className="custom-btn">Back</button>
</Link>
<form className="subscriber-form" onSubmit={this.onFormSubmitted.bind(this)}>
...............
<button type="submit" className="custom-btn add-btn">Add</button>
</div>
</form>
</div>
</div>)}
}
I tried this.props.history.push("/"), but it didn't worked.
react-router-dom v6 support only hooks version i suggest since you use class component to downgrade the version of react-router-dom in package.json.
"dependencies": {
...
"react-router-dom": "5.2.1",
},
Now you need to run : npm install or yarn install
Your Route component will look like that
import React from 'react';
import AddSubscriber from './AddSubscriber';
import ShowSubscribers from './ShowSubscribers';
import { Route, Switch, BrowserRouter as Router } from 'react-router-dom';
export default class PhoneDirectory extends React.Component{
constructor(){
super();
this.state = {[]};
}
addSubscribers = (subscribers) =>{...}
deleteSubscribers = (subscriberId) =>{...}
render() {
return (
<Router>
<Switch>
<Route exact path='/'>
<ShowSubscribers {...your props goes here}/>
</Route>
<Route exact path='/add'>
<AddSubscriber {...your props goes here}/>
</Route>
</Switch>
</Router>
)
}
}
Now you are able to call this.props.history.push
import React from 'react';
import Header from './Header';
import './AddSubscriber.css';
export default class AddSubscriber extends React.Component {
constructor() {
super();
this.state = {
id: 0,
name:'',
phone:''
}
}
onChangeHandler = (event) =>{...}
onFormSubmitted = (event) =>{
event.preventDefault();
this.props.addSubscribers(this.state);
this.setState({id:0, name:"", phone:''});
// Need logic to redirect to "/" i.e., ShowSubscribers page
}
render() {
return (<div>
<Header heading="Add Subscriber"/>
<div className="component-body-container">
<button className="custom-btn" onClick={()=>this.props.history.push('/')} >Back</button>
<form className="subscriber-form" onSubmit={this.onFormSubmitted.bind(this)}>
...............
<button type="submit" className="custom-btn add-btn">Add</button>
</div>
</form>
</div>
</div>)}
}
I think that you need to wrap your AddSubscriber page with withRouter HOC
class AddSubscriber extends React.Component{
...some-code....
}
export default withRouter(AddSubscriber)
you need navigation logic (this.props.history.push("/"))
to be located a addScubscribers page.
(you have it at "homepage" instead)
I have currently initialized a React App with firebase. Within the application, I have created an open login route and a private Home route using react-router-dom. my app.js looks like so:
App.js:
import React from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'
import Login from './pages/Login'
import Home from './pages/Home'
import PrivateRoute from './utils/PrivateRoute'
const App = () => {
return (
<BrowserRouter>
<Switch>
<PrivateRoute exact path='/' component={Home} />
<Route path='/login' component={Login} />
</Switch>
</BrowserRouter>
)
}
export default App
I am storing the currentUser in context using the onAuthStateChanged firebase event listener like so:
AppContext:
import { useEffect, useState, createContext } from 'react'
import { auth } from '../utils/firebase'
export const AppContext = createContext()
export const AppProvider = ({ children }) => {
const [currentUser, setCurrentUser] = useState(null)
useEffect(() => {
auth.onAuthStateChanged(setCurrentUser)
}, [])
return (
<AppContext.Provider value={{ currentUser }}>
{children}
</AppContext.Provider>
)
}
when a user logins in via the login route:
login:
import React, { useState, useCallback, useContext } from 'react'
import { auth } from '../utils/firebase'
import { useHistory, Redirect } from 'react-router-dom'
function Login() {
const [formData, setFormData] = useState({ email: '', password: '' })
const history = useHistory()
const handleChange = ({ target: { name, value } }) => {
setFormData({ ...formData, [name]: value })
}
const handleSubmit = useCallback(
async event => {
event.preventDefault()
await auth
.createUserWithEmailAndPassword(formData.email, formData.password)
.then(user => {
console.log(user)
history.push('/')
})
.catch(err => {
alert(err)
})
},
[history, formData.email, formData.password]
)
return (
<div className='form-container sign-up-container'>
<form className='register-form' onSubmit={handleSubmit}>
<h1>Create Account</h1>
<div className='social-container'>
<div className='social'>
<i className='fab fa-facebook-f'></i>
</div>
<div className='social'>
<i className='fab fa-google-plus-g'></i>
</div>
<div className='social'>
<i className='fab fa-linkedin-in'></i>
</div>
</div>
<span>or use your email for registration</span>
<input
type='email'
placeholder='Email'
name='email'
onChange={handleChange}
/>
<input
type='password'
placeholder='Password'
name='password'
onChange={handleChange}
/>
<button type='submit'>Sign Up</button>
</form>
</div>
)
}
export default Login
the currentUser is successfully stored in context and the user is pushed into the private Home route.
the Private Route looks like so:
import React, { useContext } from 'react'
import { Route, Redirect } from 'react-router-dom'
import { AppContext } from '../context/AppContext'
const PrivateRoute = ({ component: Component, ...rest }) => {
const { currentUser } = useContext(AppContext)
return (
<Route
{...rest}
render={routeProps =>
!!currentUser ? (
<Component {...routeProps} />
) : (
<Redirect to={'/login'} />
)
}
/>
)
}
export default PrivateRoute
The issue I'm having is that when the app refreshes, the currentUser becomes null initially and then currentUser's information loads back up. While the currentUser is null on refresh, the user is kicked from the home route and redirected to the login page. I'm wondering if anyone has any suggestions on how to prevent this from happening.
You initialize your currentUser state variable with a null value:
const [currentUser, setCurrentUser] = useState(null)
This means that currentUser is always initially null when the page is first loaded. The prior user object isn't known for sure until some time later, after it's asynchronously loaded by the Firebase SDK. Your code needs to be ready for this. If you require that a user be signed in before rendering your component, you should wait for the first time onAuthStateChanged triggers with an actual user object.
You can read more about this behavior of the Firebase Auth SDK in this blog.
I'm building a website using React and I'm trying to redirect the user to the index page after the login, but my component is not rendering anything, although I'm being redirected and I can see the URL changing from /welcome#/login to /main.
Since I'm not getting any error messages and the webpack is being successfully compiled, I can't see what's wrong anymore.
Any ideas of what could possibly be wrong?
Thank you very much!
Start.js
import React from "react";
import ReactDOM from "react-dom";
import Welcome from "./welcome";
import { App } from "./app";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import reduxPromise from "redux-promise";
import { composeWithDevTools } from "redux-devtools-extension";
import reducer from "./reducer";
const store = createStore(
reducer,
composeWithDevTools(applyMiddleware(reduxPromise))
);
let element;
if (location.pathname === "/welcome") {
element = <Welcome />;
} else {
init(store);
element = (
<Provider store={store}>
<App />
</Provider>
);
}
ReactDOM.render(element, document.querySelector("main"));
Welcome.js
import React from "react";
import Register from "./register";
import Login from "./login";
import { HashRouter, Route, Redirect } from "react-router-dom";
export default class Welcome extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<HashRouter>
<div className="register-wrapper">
<div>
<Route path="/login" component={Login} />
<Route exact path="/" component={Register} />
</div>
</div>
</HashRouter>
);
}
}
Login Component
import React from "react";
import axios from "./axios";
export default class Login extends React.Component {
constructor(props) {
super(props);
this.state = { error: false };
this.loginButton = this.loginButton.bind(this);
this.handleChange = this.handleChange.bind(this);
}
loginButton(e) {
e.preventDefault();
axios
.post("/login", this.state)
.then(res => {
if (res.data.success) {
location.replace("/main");
} else {
this.setState({
error: true
});
}
})
.catch(error => console.log(error));
}
handleChange(e) {
this.setState(
{
[e.target.name]: e.target.value
},
() => console.log("this.state:", this.state)
);
}
render() {
return (
<div className="login-main-container">
{this.state.error && <h2>Ops! Something went wrong.</h2>}
<h1 className="login-title">Kathi & Rodolfo</h1>
<h2 className="login-subtitle">Dear guest, please login first</h2>
<div className="login-container">
<form className="login-form">
<label className="label-login" htmlFor="email"> username </label>
<input className="input-login"
name="email"
placeholder="Best Couple You Know"
onChange={this.handleChange}
/>
<label className="label-login" htmlFor="password"> password </label>
<input className="input-login"
name="password"
type="password"
placeholder="Super Loving Password"
onChange={this.handleChange}
/>
<button
className="login-button"
onClick={this.loginButton}
>
Login
</button>
</form>
</div>
<h4 className="login-info">Information about username and password can be found on the Save The Date card</h4>
</div>
);
}
}
Index Component (Main)
import React from "react";
export default class Main extends React.Component {
constructor(props) {
super(props);
this.state ={ error: false};
}
render () {
return (
<div className="main-container">
<header>
<p>the wedding</p>
<p>rpsv</p>
<p>contact us</p>
<p>wedding gift</p>
</header>
{this.state.error && <h2>Ops! Something went wrong.</h2>}
<div className="save-the-date-img">
<h1>Save The Date</h1>
</div>
</div>
);
}
}
App.js
import React from "react";
import { BrowserRouter, Route, Link } from "react-router-dom";
import Main from "./main";
export class App extends React.Component {
constructor() {
super();
this.state = {};
}
render() {
return (
<BrowserRouter>
<div>
<Route exact path="/main" Component={Main}/>
</div>
</BrowserRouter>
);
}
}
location.replace("/main");
I think this line is wrong in your code.
While you are using React, you'd rather use react-router-dom's functionality than browser built-in feature.
Change the line to this.props.history.push('/main')
Give your file structure. Your component Login is not in BrowserRouter, but must be. Check the official sample: https://reacttraining.com/react-router/web/guides/quick-start.
instead of
location.replace("/main");
use
history.push("/main")
As I'm new to both react and typescript I've read several articles about how to get the "match" property from react-router working using typescript and I haven't been able to successfully do it. I have no parameters I am passing, I just want to be able to use the match.url of react-router.
So the examples I am seeing is that the field in the login.tsx file should use {match.url}. I tried the react 4 router demo here: https://codesandbox.io/s/nn8x24vm60?from-embed where they used {${match.url}/register} but that didn't work either. Then I saw some posts where people said you had to declare an interface but it was split between RouteComponent and Route and most were dealing with parameters. Basically all I want it to do is when I click the link to switch to the register route(it's in register.tsx - not shown here as it's a simple file with just a header on it).
Currently its throwing the following eror:
"Error TS2739 (TS) Type '{}' is missing the following properties from type
'Readonly<MyProps & RouteComponentProps<{}, StaticContext, any>>': register, history, location, match"
Any help as to what I'm doing wrong would be appreciated.
app.tsx file:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Redirect, Link, Route, Switch } from 'react-router-dom';
import { Home } from './home';
import { Register } from './register';
import { NavBar } from './navbar';
export class App extends React.Component<{}, {}> {
render() {
return (
<Router>
<div>
<NavBar/>
<Switch>
<Route path="/" component={Home} />
<Route path="/register" component={Register} />
</Switch>
</div>
</Router>
);
}
}
ReactDOM.render(, document.getElementById('root'));
home.tsx file:
import React from 'react';
import { Login } from './login';
import { Jumbotron } from 'react-bootstrap';
const jumboStyle = {
background: 'lightgray',
height: '20%',
width: '40%',
margin: 'auto'
};
export class Home extends React.Component<{}, {}> {
render() {
return (
<div>
< Jumbotron style={jumboStyle}>
<h1>Welcome to the new League!</h1>
<h4>Please log in with your username and password to continue</h4>
<Login />
<br />
<br />
</Jumbotron>
</div>
);
}
}
login.tsx file:
import React from 'react';
import { Link, RouteComponentProps } from "react-router-dom";
import TextField from '#material-ui/core/TextField';
import Button from '#material-ui/core/Button';
import { Alert } from 'react-bootstrap';
import { Register } from './register';
interface IState {
[key: string]: any; // or the type of your input
}
interface MyProps {
register: Register
}
const styles = {
background: 'lightblue'
};
export class Login extends React.Component<MyProps & RouteComponentProps, IState> {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
authorized: false
};
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) {
//we are goingto submit the form to the database
event.prevent.default();
}
render() {
return (
<div>
<form noValidate autoComplete="off" onSubmit={this.handleSubmit} style={{ textAlign: 'center' }}>
<TextField
id="username"
name="username"
label="UserName"
helperText="Enter your Username"
value={this.state.username}
onChange={this.handleChange}
required={true}
style={styles}
/>
<br />
<TextField
id="password"
name="password"
type="password"
helperText="Enter your password"
label="Password"
onChange={this.handleChange}
required={true}
style={styles}
/>
<br />
<br />
<br/>
<Button
type="submit"
value="Submit"
variant="contained"
color="primary"
>Submit</Button>
<br />
<br/>
<Alert variant="info">
<Alert.Heading>Don't Have An Account Setup?</Alert.Heading>
<div>
<Link to={`${this.props.match.url}/register`}>Register Here</Link>
</div>
</Alert>
</form>
</div>
)
}
}
By default the react-router properties (such as match) are only automatically injected into the component rendered by a route (Home in this case). You can add them to your component using the withRouter wrapper. You then have to use the wrapped component instead of the internal one.
import {withRouter} from 'react-router';
...
class LoginInternal extends React.Component<MyProps & RouteComponentProps, IState> {
...
export const Login = withRouter(LoginInternal);
You need to pass props from Home component to Login component.
<Login match={this.props.match}/>
It should work.
I've seen many answer on this website and in official docs and many other places. But I couldn't able to achieve results. That's why I'm posting this question.
SO, my question is I have 3 files named:
App.js, SignUp.js and Welcome.js.
My task is to get value in form from SignUp.js page and print that value to the Welcome.js component. I read about lifting state up and higher order components but couldn't able to do it.
Any help is appreciated.
Here's my code:
App.js:
import React,{Component} from "react";
import {BrowserRouter as Router, Link, Switch, Route} from "react-router-dom";
import SignUp from './SignUp';
import Welcome from './Welcome';
class App extends Component {
render(){
var homeMessage = () =>{
return(<div><SignUp /></div>);
}
return(
<Router>
<div>
<Route exact path="/src/Welcome" component={Welcome}/>
<Route exact path="/" component={homeMessage}/>
</div>
</Router>
);
}
}
export default App;
SignUp.js;
import React,{Component} from "react";
import {Link} from "react-router-dom";
export default class SignUp extends Component {
constructor(props){
super(props);
this.state = {
firstName:''
};
}
inputData = event =>
{
this.setState({
[event.target.name]:event.target.value
});
}
submitData = event =>
{
event.preventDefault();
}
render(){
return(
<div>
<form onSubmit={this.submitData}>
<input type="text" name="firstName" onChange={this.inputData}/>
<button type="submit"> Submit</button>
</form>
<Link to="/src/Welcome">Welcome</Link>
</div>
);
}
}
Welcome.js:
import React,{Component} from "react";
import SignUp from './SignUp';
export default class Welcome extends Component {
render(){
return(
<div>
{this.state.firstName}
</div>
);
}
}
"And please give answer if possible then in react-way only not redux or any other library. Because as per Dan Abramov article "Thinking in React" so first I want to try all scope which is available in react only."
Pass the data back to the parent from SignUp component and then pass it as a prop to the Welcome component. The other way is to store the SignUp component state in the App component so that you don't need to pass it back up when you submit.
App.js
import React,{Component} from "react";
import {BrowserRouter as Router, Link, Switch, Route} from "react-router-dom";
import SignUp from './SignUp';
import Welcome from './Welcome';
class App extends Component {
state = {
firstName: ''
}
onSignIn = (value) => {
this.setState({firstName: value});
}
render(){
return(
<Router>
<div>
<Route exact path="/src/Welcome" render={(props) => <Welcome firstName={this.state.firstName} {...props}/>}/>
<Route exact path="/" render={(props) =>{
return(<div><SignUp onSignIn={this.onSignIn} {...props} /></div>);
}}/>
</div>
</Router>
);
}
}
export default App;
SignUp.js
export default class SignUp extends Component {
constructor(props){
super(props);
this.state = {
firstName:''
};
}
inputData = event =>
{
this.setState({
[event.target.name]:event.target.value
});
}
submitData = event =>
{
event.preventDefault();
this.props.onSignIn(this.state.firstName);
}
render(){
return(
<div>
<form onSubmit={this.submitData}>
<input type="text" name="firstName" onChange={this.inputData}/>
<button type="submit"> Submit</button>
</form>
<Link to="/src/Welcome">Welcome</Link>
</div>
);
}
}
Welcome.js
import React,{Component} from "react";
import SignUp from './SignUp';
export default class Welcome extends Component {
render(){
return(
<div>
{this.props.firstName}
</div>
);
}
}
Some useful links:
How to pass data from child component to its parent in ReactJS?
Passing custom props to router component in react-router v4
ReactJS - Lifting state up vs keeping a local state