This.props is not a function

Question

I'm trying to pass this.state.user to props using isAuthed function but it returns

this.props.isAuthed is not a function

. My ultimate goal is to be able to pass this.state.user as props to my App.js to make Sign out button appear and dissapear depending on whether the user is logged in or not. What can be the problem?

import React from "react";
import { Redirect } from "react-router-dom";
import firebaseConfig from "./firebaseconfig";


class Dashboard extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
        this.displayCredentials = this.displayCredentials.bind(this);
        this.isAuthed = this.isAuthed.bind(this);
      }

      displayCredentials() {
        firebaseConfig.auth().onAuthStateChanged( (user) => {
            if (user) {
              //console.log(user.displayName);
              this.setState({
                  user: user.displayName
              });
              
            } else {
               this.setState({
                   user: false
               })  
            }
          });
        }

        isAuthed() {
            this.props.isAuthed(this.state.user);
        }
        

      componentDidMount() {
          this.displayCredentials();
          this.isAuthed();
      }

    render() {
        if (this.state.user === false) {
            return <Redirect to='/sign-in' />
        }
        
      return (<h1>Hello, {this.state.user}</h1>);
    }
  }

export default Dashboard;

IsAuthed in the parent App.js component looks like this:

<Route path='/dashboard' component={Dashboard} isAuthed = {this.checkIfAuthed}>

It calls the function checkIfAuthed :

checkIfAuthed(isLoggedIn){
    if(isLoggedIn) {
      this.setState({
        isLoggedIn: true
      })
    }
    alert('Logged In')
}

The whole App.js component looks like this:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

import Login from "./Login";
import SignUp from "./Signup";
import Forgotpassword from './Forgotpassword';
import Dashboard from './Dashboard';

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
        isLoggedIn: false
    }
    this.checkIfAuthed = this.checkIfAuthed.bind(this);
  }
  checkIfAuthed(isLoggedIn){
    if(isLoggedIn) {
      this.setState({
        isLoggedIn: true
      })
    }
    alert('Logged In')
}
  render() {
    return (
      <Router>
        <div className="App">
          <nav className="navbar navbar-expand-lg navbar-light fixed-top">
            <div className="container">
              <div className="collapse navbar-collapse" id="navbarTogglerDemo02">
                <ul className="navbar-nav ml-auto">
                  <li className="nav-item">
                    <Link className="nav-link" to={"/sign-in"}>Login</Link>
                  </li>
                  <li className="nav-item">
                    <Link className="nav-link" to={"/sign-up"}>Sign up</Link>
                  </li>
                  <li className="nav-item">
                    <Link className="nav-link" to={"/sign-in"}>Sign out</Link>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
        
          <div className="auth-wrapper">
            <div className="auth-inner">
              <Switch>
                <Route exact path='/' component={Login} />
                <Route path="/sign-in" component={Login} />
                <Route path="/sign-up" component={SignUp} />
                <Route path='/forgotpassword' component={Forgotpassword} />
                <Route path='/dashboard' component={Dashboard} isAuthed = {this.checkIfAuthed}> 
                </Route>
              </Switch>
            </div>
          </div>
        </div>
      </Router>
    );
  }
}

export default App;

Answer 1

It seems you are using react-router-dom and attempting to pass extra props to a component being rendered by a Route component. Extra props aren't passed along, they are ignored.

You can use the render prop and pass in any extra props along with the route props.

<Route
  path='/dashboard'
  render={routeProps => (
    <Dashboard {...routeProps} isAuthed={this.checkIfAuthed} />
  )}
/>

Or render as a child component if you don't need the route props

<Route path='/dashboard' >
  <Dashboard isAuthed={this.checkIfAuthed} />
</Route>