We Keep Coding

How to pass a function from Parent to an element within a route in React.js?

I want to pass a function to a component through a Route , I can do it with direct children but when it comes to Routes i can't figure it how to do it.
look at the code below , i want to pass "updateUserState" function to Profile Component , the function works properly in Header component but it's not working in Profile component which lives inside the Routes .
class App extends React.Component {
updateUserState = (currentUser) => {
if(currentUser != null) {
this.setState({
currentUser: currentUser
})
} else {
this.setState({
currentUser: null
});
}
return this.state.currentUser;
}
render() {
return (
<div className="App">
<Header updateUserState={this.updateUserState} />
<Routes>
<Route path='/profile' element={<ProfilePage updateUserState={this.updateUserState} />}/>
</Routes>
</div>
);
}
}
this is the code in Profile component which is completely similar to Header Component :
const ProfileCard = ({updateUserState}) => {
const signout = () => {
handleLogout()
updateUserState()
}
return (
<div className='profile-card'>
<a onClick={() => signout()}>
Sign Out
</a>
</div>
)
}
Update :
solved thanks to Abir Taheer !
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
currentUser: null
}
this.updateUserState = this.updateUserState.bind(this);
}
updateUserState = (currentUser) => {
if(currentUser != null) {
this.setState({
currentUser: currentUser
}, () => console.log(this.state.currentUser))
} else {
this.setState({
currentUser: null
}, () => console.log(this.state.currentUser));
}
return this.state.currentUser;
}
render() {
return (
<div className="App">
<Header currentUser={this.state.currentUser} updateUserState={this.updateUserState} />
<Routes>
<Route path='/profile' element={<ProfilePage updateUserState={this.updateUserState}
currentUser={this.state.currentUser} />}
/>
</Routes>
</div>
);
}
}
then inside ProfilePage :
const ProfilePage = ( {currentUser, updateUserState} ) => {
return (
<div>{
currentUser ?
<div>
<ProfileCard id={currentUser.id} updateUserState={updateUserState} />
</div>
:
<h1>No User Signed In</h1>
}</div>
)
}
And ProfileCard :
const ProfileCard = ({id, updateUserState}) => {
const signout = () => {
handleLogout()
updateUserState();
}
return (
<div className='profile-card'>
<a onClick={() => signout()}>
Sign Out
</a>
</div>
)
}

The issue arises because of the this keyword. When you're passing a function to another component you need to bind the this keyword to the parent instance otherwise it may not work properly.
This behavior is described in the React Docs here: https://reactjs.org/docs/faq-functions.html
and more specifically further down in the page here: Why is binding necessary at all?
When you bind this to the parent instance then it refers to the correct state and the function should work.
You need to update your component like such:
class App extends React.Component {
constructor(props) {
super(props);
// Make sure to initialize your state accordingly
this.state = {
currentUser: null,
};
// --- This is the line you need ---
this.updateUserState = this.updateUserState.bind(this);
}
updateUserState(currentUser) {
if (currentUser != null) {
this.setState({
currentUser: currentUser,
});
} else {
this.setState({
currentUser: null,
});
}
return this.state.currentUser;
}
render() {
return (
<div className="App">
<Header updateUserState={this.updateUserState} />
<Routes>
<Route
path="/profile"
element={<ProfilePage updateUserState={this.updateUserState} />}
/>
</Routes>
</div>
);
}
}

The way you do it seems like you are rendering the component instead of passing a reference.
How I would suggest is to wrap the component in another function and return with your function passed in as a prop. So basically making another react component with the method passed in. Use that wrapper component instead:
const wrappedProfilePage = () => <ProfilePage updateUserState={this.updateUserState} />;
..
.
.
<Route path='/profile' element={wrappedProfilePage}/>

React Js renderings is functionalities not working

I am new to react . I am hared coded the username and password into js pages . I am trying to redirect to user into admin pages on the text fields values. Here is mentioned that username and password Admin then i want to redirect the user into admin page else into home page but is not working . I also defined the router as well into app.js files.
Here is the app.js .
import React from 'react';
import { Router, Route, Switch, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import { history } from '../_helpers';
import { alertActions } from '../_actions';
import { PrivateRoute } from '../_components';
import { HomePage } from '../HomePage';
import { LoginPage } from '../LoginPage';
import { RegisterPage } from '../RegisterPage';
import CreateEmployeeComponent from '../EmployeeComponets/CreateEmployeeComponent';
import ViewEmployeeComponent from '../EmployeeComponets/ViewEmployeeComponent';
import AdminComponent from '../EmployeeComponets/AdminComponent';
class App extends React.Component {
constructor(props) {
super(props);
history.listen((location, action) => {
// clear alert on location change
this.props.clearAlerts();
});
}
render() {
const { alert } = this.props;
return (
<div className="jumbotron">
<div className="container">
<div className="col-sm-8 col-sm-offset-2">
{alert.message &&
<div className={`alert ${alert.type}`}>{alert.message}</div>
}
<Router history={history}>
<Switch>
<PrivateRoute exact path="/" component={HomePage} />
<Route path = "/add-employee/:id" component = {CreateEmployeeComponent} />
<Route path = "/view-employee/:id" component = {ViewEmployeeComponent} />
<Route path="/login" component={LoginPage} />
<Route path="/register" component={RegisterPage} />
<Route path ="/admin" component={AdminComponent} />
<Redirect from="*" to="/" />
</Switch>
</Router>
</div>
</div>
</div>
);
}
}
function mapState(state) {
const { alert } = state;
return { alert };
}
const actionCreators = {
clearAlerts: alertActions.clear
};
const connectedApp = connect(mapState, actionCreators)(App);
export { connectedApp as App };
Here is the code for Login.js
import React from 'react';
import { Link, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import { userActions } from '../_actions';
class LoginPage extends React.Component {
constructor(props) {
super(props);
// reset login status
this.props.logout();
this.state = {
username: '',
password: '',
submitted: false
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e) {
const { name, value } = e.target;
this.setState({ [name]: value });
}
handleSubmit(e) {
e.preventDefault();
this.setState({ submitted: true });
const { username, password } = this.state;
if (username && password) {
this.props.login(username, password);
}
else if(username==="Admin" && password==="Admin"){
localStorage.setItem("token" , "shjsshhbhbh")
this.setState({
loggingIn:true
})
}
}
render() {
if(this.state.loggingIn){
return <Redirect to ="/admin" />
}
const { loggingIn } = this.props;
const { username, password, submitted } = this.state;
return (
<div className="col-md-6 col-md-offset-3">
<h2>Login</h2>
<form name="form" onSubmit={this.handleSubmit}>
<div className={'form-group' + (submitted && !username ? ' has-error' : '')}>
<label htmlFor="username">Username</label>
<input type="text" className="form-control" name="username" value={username} onChange={this.handleChange} />
{submitted && !username &&
<div className="help-block">Username is required</div>
}
</div>
<div className={'form-group' + (submitted && !password ? ' has-error' : '')}>
<label htmlFor="password">Password</label>
<input type="password" className="form-control" name="password" value={password} onChange={this.handleChange} />
{submitted && !password &&
<div className="help-block">Password is required</div>
}
</div>
<div className="form-group">
<button className="btn btn-primary">Login</button>
{loggingIn &&
}
<Link to="/register" className="btn btn-link">Register</Link>
</div>
</form>
</div>
);
}
}
function mapState(state) {
const { loggingIn } = state.authentication;
return { loggingIn };
}
const actionCreators = {
login: userActions.login,
logout: userActions.logout
};
const connectedLoginPage = connect(mapState, actionCreators)(LoginPage);
export { connectedLoginPage as LoginPage };
Here is the private route code
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
export const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
localStorage.getItem('user')
? <Component {...props} />
: <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
)} />
)
Here is the admin page .
import React, { Component } from 'react'
import { Redirect } from 'react-router-dom';
import EmployeeService from '../services/EmployeeService';
class AdminComponent extends Component {
constructor(props) {
super(props)
const token =localStorage.getItem("token")
let loggedIn = true
{
if(token == null){
loggedIn - false
}
this.state ={
loggedIn
}
}
this.state = {
// step 2
id: this.props.match.params.id,
firstName: '',
lastName: '',
emailId: ''
}
this.changeFirstNameHandler = this.changeFirstNameHandler.bind(this);
this.changeLastNameHandler = this.changeLastNameHandler.bind(this);
this.saveOrUpdateEmployee = this.saveOrUpdateEmployee.bind(this);
}
// step 3
componentDidMount(){
// step 4
if(this.state.id === '_add'){
return
}else{
EmployeeService.getEmployeeById(this.state.id).then( (res) =>{
let employee = res.data;
this.setState({firstName: employee.firstName,
lastName: employee.lastName,
emailId : employee.emailId
});
});
}
}
saveOrUpdateEmployee = (e) => {
e.preventDefault();
let employee = {emailId: this.state.emailId,firstName: this.state.firstName, lastName: this.state.lastName};
console.log('employee => ' + JSON.stringify(employee));
// step 5
if(this.state.id === '_add'){
EmployeeService.createEmployee(employee).then(res =>{
this.props.history.push('/employees');
});
}else{
EmployeeService.updateEmployee(employee, this.state.id).then( res => {
this.props.history.push('/employees');
});
}
}
changeFirstNameHandler= (event) => {
this.setState({firstName: event.target.value});
}
changeLastNameHandler= (event) => {
this.setState({lastName: event.target.value});
}
changeEmailHandler= (event) => {
this.setState({emailId: event.target.value});
}
cancel(){
this.props.history.push('/employees');
}
getTitle(){
if(this.state.id === '_add'){
return <h3 className="text-center">Add Employee</h3>
}else{
return <h3 className="text-center">Update Employee</h3>
}
}
render() {
if(this.state.loggedIn === false)
{
return <Redirect to ="/login" />
}
return (
<div>
<h1>Welcome to adimin </h1>
<br></br>
<div className = "container">
<div className = "row">
<div className = "card col-md-6 offset-md-3 offset-md-3">
{
this.getTitle()
}
<div className = "card-body">
<form>
<div className = "form-group">
<label> Email Id: </label>
<input placeholder="Email Address" name="emailId" className="form-control"
value={this.state.emailId} onChange={this.changeEmailHandler}/>
</div>
<div className = "form-group">
<label> First Name: </label>
<input placeholder="First Name" name="firstName" className="form-control"
value={this.state.firstName} onChange={this.changeFirstNameHandler}/>
</div>
<div className = "form-group">
<label> Last Name: </label>
<input placeholder="Last Name" name="lastName" className="form-control"
value={this.state.lastName} onChange={this.changeLastNameHandler}/>
</div>
<button className="btn btn-success" onClick={this.saveOrUpdateEmployee}>Save</button>
<button className="btn btn-danger" onClick={this.cancel.bind(this)} style={{marginLeft: "10px"}}>Cancel</button>
</form>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default AdminComponent

in your handleSubmit function always first if is true and after that javascript didn't check another else if.
Also you need add another state isAdmin and use it like this:
const { username, password } = this.state;
if (username==="Admin" && password==="Admin") {
this.props.login(username, password);
localStorage.setItem("token" , "adminsaddad")
this.setState({
loggingIn:true,
isAdmin:true
})
} else if (username && password) {
this.props.login(username, password);
localStorage.setItem("token" , "shjsshhbhbh")
this.setState({
loggingIn:true
})
}
Then check if the user is admin or not:
if(this.state.loggingIn){
if(this.state.isAdmin)
return <Redirect to ="/admin" />
else
return <Redirect to ="/" />
}
But this is not a safe way for the admin page, should also add the admin component in your PrivateRoute and check the token then redirect user.

React: Child Component Does Not Rerender When Submitting Form

I am new in React and I will appreaciate much any help. I am using create-react-app, react-router-dom and express server. When I try to submit a comment to a blog post (child component called Details), it gets stored in the database, however the component does not seem to update and i do not see the new comment.As a result, I can see the new comment only after i refresh the page but not on form submit. I guess I am not setting componentDidUpdate properly but I do not have a clue how to do it, so i can see the comment immediately.
Here is my App.js:
class App extends Component {
constructor(props) {
super(props)
this.state = {
userId: null,
username: null,
isAdmin: false,
isAuthed: false,
jwtoken: null,
posts: [],
filtered: [],
}
this.handleSubmit = this.handleSubmit.bind(this)
}
static authService = new AuthService();
static postService = new PostService();
static commentService = new CommentService();
componentDidMount() {
const isAdmin = localStorage.getItem('isAdmin') === "true"
const isAuthed = !!localStorage.getItem('username');
if (isAuthed) {
this.setState({
userId: localStorage.getItem('userId'),
username: localStorage.getItem('username'),
isAdmin,
isAuthed,
})
}
this.getPosts()
}
componentDidUpdate(prevProps, prevState, posts) {
if (prevState === this.state) {
this.getPosts()
}
}
handleChange(e, data) {
this.setState({
[e.target.name]: e.target.value
})
}
handleCommentSubmit(e, data) {
e.preventDefault();
e.target.reset();
App.commentService.createComment(data)
.then(body => {
this.getposts()
if (!body.errors) {
toast.success(body.message);
}
else {
toast.error(body.message);
}
}
)
.catch(error => console.error(error));
}
getPosts() {
App.postService.getPost()
.then(data => {
this.setState({
posts: data.posts.length? data.posts : []
});
}
)
.catch(e => this.setState({ e }))
}
render() {
return (
<Fragment>
<Header username={this.state.username} isAdmin={this.state.isAdmin} isAuthed={this.state.isAuthed} logout={this.logout.bind(this)} />
<Switch>
<Route exact path="/" render={(props) => (
<Home
posts={this.state.posts}
handleSearchSubmit={this.handleSearchSubmit.bind(this)}
handleChange={this.handleSearchChange.bind(this)}
{...props} />
)} />
<Route path="/posts/:id" render={(props) =>
<Details handleSubmit={this.handleCommentSubmit.bind(this)}
isAdmin={this.state.isAdmin}
isAuthed={this.state.isAuthed}
posts={this.state.posts}
handleChange={this.handleChange}
{...props} />} />
</Switch>
<Footer posts={this.state.posts} formatDate={this.formatDate} />
</Fragment>
);
}
}
export default withRouter(App);
Here is my Details.js:
class Details extends Component {
constructor(props) {
super(props);
this.state = {
post: null,
comment: null
}
this.handleChange = props.handleChange.bind(this);
}
componentDidMount() {
const { posts, match } = this.props;
this.setState({
post: posts.length
? posts.find(p => p._id === match.params.id)
: null,
userId: localStorage.getItem('userId')
})
}
componentDidUpdate(prevProps) {
const { posts, match, isAuthed } = this.props;
if (JSON.stringify(prevProps) === JSON.stringify(this.props)) {
return;
}
this.setState({
post: posts.length
? posts.find(p => p._id === match.params.id)
: null
});
}
render() {
const { post } = this.state;
const { isAdmin, isAuthed } = this.props;
if (!post) {
return <span>Loading post ...</span>;
}
return (
<section className="site-section py-lg">
<form onSubmit={(e)=> this.props.handleSubmit(e, this.state)} className="p-5 bg-light">
<div className="form-group">
<label htmlFor="message">Message</label>
<textarea name="comment" id="message" onChange={this.handleChange} cols={30} rows={10} className="form-control" defaultValue={ ""} />
</div>
<div className="form-group">
<input type="submit" defaultValue="Post Comment" className="btn btn-primary" />
</div>
</form>}
</section>
);
}
}
export default Details;
Any help will be much appreciated!

You are doing a mistake that will be done by any new React developer. Just remember one thing that:-
UI is a function of state
So your UI will only be updated if your state is update.
After submitting a comment don't fetch all your comments again, just concat your new comment to current state and you will see your comment as soon as you submit it successfully

React js check for props in shared layout

I have a small React app which has a header component shared across the app from the index.js where the routing is set. I want to check on a specific page (Admin.js) if I'm logged in (Facebook auth already done with Firebase and working fine) and if so, show on the header component the log out button and Facebook profile pic.
index.js (imports omitted):
const Root = () => {
return (
<div>
<Header />
<main>
<Router>
<Switch>
<Route path="/" component={App} exact />
<Route path="/admin" component={Admin} exact />
</Switch>
</Router>
</main>
</div>
);
};
render(<Root/>, document.querySelector('#root'));
Header.js:
import React from 'react';
class Header extends React.Component {
render() {
return (
<header className="header">Header Home
<img src={image prop here or something...} alt=""/>
</header>
)
}
}
export default Header
Admin.js
class Admin extends React.Component {
constructor() {
super();
this.addPicture = this.addPicture.bind(this);
// getinitialstate
this.state = {
pictures: [],
uid: null,
avatar: ''
}
}
// firebase syncing
componentWillMount() {
this.ref = base.syncState('pictures', {
context: this,
state: 'pictures',
});
}
componentDidMount() {
firebase.auth().onAuthStateChanged((user) => {
if(user) {
this.authHandler(null, { user });
}
})
}
authenticate() {
firebase.auth().signInWithPopup(provider).then(() => {this.authHandler});
}
logout = () => {
firebase.auth().signOut().then(() => {
this.setState({
uid: null,
avatar: ''
});
});
}
authHandler(err, authData) {
console.log(authData)
if (err) {
return;
}
this.setState({
uid: authData.user.uid,
avatar: authData.user.photoURL
});
}
renderLogin() {
return (
<nav>
<h2>Please log in to access the Admin Area</h2>
<button className="c-form__btn" onClick={() => this.authenticate()}>Log in</button>
</nav>
)
}
addPicture(e) {
e.preventDefault();
const picsRef = firebase.database().ref('pictures');
const picture = {
title: this.title.value,
url: this.url.value,
category: this.category.value
}
picsRef.push(picture);
this.picForm.reset();
}
removePicture = (key) => {
const pictures = {...this.state.pictures};
pictures[key] = null;
this.setState({ pictures });
}
renderTable = () => {
return Object
.keys(this.state.pictures)
.map(key => <Table key={key} index={key} details={this.state.pictures[key]} removePic={() => this.removePicture(key)}/>)
}
render() {
const logout = <button className="c-form__btn secondary" onClick={this.logout}>Log Out!</button>
// check if ther're no logged id at all
if(!this.state.uid) {
return <div>{this.renderLogin()}</div>
}
// check if they are the owner of the app
if(this.state.uid !== USER_UID) {
return (
<div>
<h3>Access not allowed!</h3>
{logout}
</div>
)
}
return (
<div>
<h1>Admin</h1>
<p>{logout}</p>
<img src={this.state.avatar} alt="User" style={{width: '50px'}}/>
<form ref={(input) => this.picForm = input} className="c-form" onSubmit={(e) => this.addPicture(e)}>
<div className="c-form__field"><input ref={(input) => this.title =input} type="text" placeholder="title" className="c-form__input"/></div>
<div className="c-form__field"><input ref={(input) => this.url =input} type="text" placeholder="Image url" className="c-form__input"/></div>
<div className="c-form__field">
<select ref={(input) => this.category =input} className="c-form__input">
<option value=" " disabled>Select a category</option>
{catOptions()}
</select>
</div>
<div className="c-form__field"><button className="c-form__btn" type="submit">Add Item</button></div>
</form>
<div className="table">
<div className="table__row t_header">
{tableHeader()}
</div>
{this.renderTable()}
</div>
</div>
)
}
}
export default Admin
How do I show the logout button and the Facebook profile pic (this.state avatar) on the Header component?

You need to lift the state up. For example:
class Root extends React.Component {
state = {
isLogged: false
img: null,
username: '',
}
login = (username, img) => {
this.setState({
img,
username,
isLogged: true,
});
}
logout = () => {
this.setState({
img: null,
username: '',
isLogged: false,
})
}
render() {
return (
<div>
<Header
username={this.state.username}
img={this.state.img}
isLogged={this.state.isLogged}
logout={this.logout}
/>
<main>
<Router>
<Switch>
<Route path="/" component={App} exact />
<Route
exact
path="/admin"
render={props => <Admin {...props} login={this.login} />}
/>
</Switch>
</Router>
</main>
</div>
);
}
};
Now you can update state in Root with updater function passed to Admin. From now on you just pass props to whatever you want. You get the idea...

How do I go to a new path after signing up in React

I'm new to React, I'm building an Electron app.
In the code below, I check to see if there's a signed in user, and if so, I render Home, if they haven't logged in yet or signed up, I render SignIn
(this code lives in app.js)
if (JSON.parse(localStorage.cookies).user_id === undefined) {
render((
<Provider store={store}>
<SignIn />
</Provider>
), document.getElementById('content'));
} else {
render((
<Provider store={store}>
<Home />
</Provider>
), document.getElementById('content'));
}
When the user signs up or logs in, I want to take them to Home right afterwards. I can do that in development my refreshing my Electron window. How do I achieve this in my code?
Here is the code for SignIn.js
import React, { Component, PropTypes } from 'react';
import {connect} from 'react-redux';
import {signUp, logIn} from '../entities/auth/actions';
class SignIn extends Component {
constructor(props) {
super(props);
this.logIn = this.logIn.bind(this);
this.signUp = this.signUp.bind(this);
this.state = {
registration: {
username: '',
password: '',
email: '',
},
login: {
username: '',
password: '',
},
};
}
signUp() {
this.props.dispatch(signUp(this.state.registration));
}
logIn() {
this.props.dispatch(logIn(this.state.login));
}
render() {
const {registration, login} = this.state;
return (
<div className="sign-in">
<h1>MyApp</h1>
<form id="login-form" onSubmit={(e) => {
e.preventDefault();
}}>
<input type="username" value={login.username} placeholder="Enter username" onChange={e => this.setState({login: {...login, username: e.target.value}})}/>
<input type="password" value={login.password} placeholder="Enter password" onChange={e => this.setState({login: {...login, password: e.target.value}})}/>
<button onClick={this.logIn}>Log in</button>
</form>
<form id="registration-form" onSubmit={(e) => {
e.preventDefault();
}}>
<input type="text" value={registration.username} placeholder="Enter user name" onChange={e => this.setState({registration: {...registration, username: e.target.value}})}/>
<input type="password" value={registration.password} placeholder="Enter password" onChange={e => this.setState({registration: {...registration, password: e.target.value}})}/>
<input type="email" value={registration.email} placeholder="Enter email" onChange={e => this.setState({registration: {...registration, email: e.target.value}})}/>
<button onClick={this.signUp}>Sign up</button>
</form>
</div>
);
}
}
SignIn.propTypes = {
dispatch: PropTypes.func,
};
const mapStateToProps = () => {
return {};
};
export default connect(mapStateToProps)(SignIn);
Thanks!

Assuming you don't want to use react-router, a way to approach this problem would be to have a higher component that renders either Login or Home by checking the cookies. This component could have a state value loggedIn. For example:
class Application extends React.Component {
constructor(props) {
super(props);
this.handleLogin = this.handleLogin.bind(this);
const isLoggedIn = JSON.parse(localStorage.cookies).user_id === undefined;
this.state = {
loggedIn: isLoggedIn,
}
}
handleLogin() {
//if login was successful, do:
this.setState({ loggedIn: true })
}
render() {
return (
<div>
{
this.state.loggedIn
? <Home />
: <LoggedIn handleLogin={this.handleLogin}>
}
</div>
)
}
}
Then trigger handleLogin in your Login component somehow:
signUp() {
this.props.dispatch(signUp(this.state.registration, this.props.handleLogin));
}
logIn() {
this.props.dispatch(logIn(this.state.login, this.props.handleLogin));
}
render() {
const {registration, login} = this.state;
This will update the parent state and rerender the appropriate component.
Also need to change
render((
<Provider store={store}>
<Application />
</Provider>
), document.getElementById('content'));