Can not read properties of null (reading '0'). React

Question

Can someone please help me on this.

I am getting errors while running the below code. I don't know what mistake I am doing. I have put the comment in the line where error is coming. Even a little suggestion would be very helpful.

Error is in the image at the end.

import React from 'react';
import { Link } from 'react-router-dom';
import Auth from './auth/auth';
import { BrowserRouter, withRouter } from 'react-router-dom';
import { Security } from '@okta/okta-react';
import { oktaAuth, toRelativeUrl } from '../../../../libs/okta-auth.js';
import Routes from './routes/routes';

class App extends React.Component<any, any> {
  restoreOriginalUri: any;

  constructor(props) {
    super(props);
    try {
      this.restoreOriginalUri = async (_oktaAuth, originalUri) => {
        //        *********ERROR IN THE BELOW LINE*********

        props.history.replace(
          toRelativeUrl(originalUri, window.location.origin)
        );
      };
    } catch (error) {
      console.log('error');
    }
  }

  render() {
    return (
      <h1>
        Welcome to clinical-trials!!!
        <br />
        <hr />
        <br />
        <div role='navigation'>
          <ul>
            <li>
              <Link to='/'>Home</Link>
            </li>
          </ul>
        </div>
        <div>
          <Security
            oktaAuth={oktaAuth}
            restoreOriginalUri={this.restoreOriginalUri}
          >
            <Auth />
            <Routes />
          </Security>
        </div>
      </h1>
    );
  }
}

const AppWithRouter = withRouter(App);

// eslint-disable-next-line import/no-anonymous-default-export
export default class extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <AppWithRouter />
      </BrowserRouter>
    );
  }
}

What mistake I am doing. I am new to react.
Can it be resolved using callback?
I used setTimeout() but it didn't help

Is `props` object accessible? Shouldn't be it referenced via `this.props` ? — Dmitrii Zolotuhin, Oct 16 '21 at 12:12
why are you using async? if you use async maybe props are not accesible. If you want to use async, maybe you have to pass the history by parameter in the async function. — kahonmlg, Oct 16 '21 at 12:20
It probably does, but just sanity checking, the `history` property does exist in the `props` object right? Have you tried using the browser's dev tools to break point in the async function to ensure it's pointing to the object you're expecting it to and the data you expect exists? — Patrick Barr, Oct 22 '21 at 16:36

Nick · Accepted Answer · 2021-10-19T15:32:18.327

I'm not entirely sure about what's causing the bug, but there are several things to check.

`props` vs `this.props`

When writing components as a class, you'll have this rough structure:

class Component extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return <>text that is rendered</>
  }
}

This follows several object oriented paradigms. Most notably, though, the props are given as an argument to the constructor, then are passed into super. Since a React component extends React.Component, the super is React.Component's constructor and it assigns props to this.props.

That means anywhere in the class, you can access the props with this.props.

Methods

Inside your class, you've declared a method restoreOriginalUri.

class Component extends React.Component {
  restoreOriginalUri: any

  //…
}

You are then initializing that method inside the constructor. In general, it's best practice to not do this and just initialize the method in the root of the class.

class Component extends React.Component {
  async restoreOriginalUri(_oktaAuth, originalUri) {
    this.props.history.replace(
      toRelativeUrl(originalUri, window.location.origin)
    )
  }

  //…
}

Also notice the use of this.props.

By following conventions like this, you'll encounter fewer bugs (like the one you're experiencing now).

`.bind(this)`

When passing methods down to components as you do here, it's best to use .bind(this) at the end.

In short, JavaScript's this keyword can be confusing and by passing down the method as is, this will no longer refer to the App component.

<Security
  oktaAuth={oktaAuth}
  restoreOriginalUri={this.restoreOriginalUri.bind(this)}
>
  <Auth />
  <Routes />
</Security>

Anyways, these tips are much more idiomatic React, so unless you have a reason to not apply these tips, I'd recommend following applying them.

score 2 · Answer 2 · answered Oct 16 '21 at 22:49

Try moving the declaration of the handler outside the constructor. I don't see any need to wrap it in a try/catch because you're no execution code there, just declaring the handler.

class App extends React.Component<any, any> {
  restoreOriginalUri: any;

  constructor(props) {
    super(props);
  }
  
  restoreOriginalUri = async (_oktaAuth, originalUri) => {
    this.props.history.replace(
      toRelativeUrl(originalUri, window.location.origin)
    );
  };
...

this will bind this to the component instance and you should be able to access this.props

https://reactjs.org/docs/handling-events.html

Can not read properties of null (reading '0'). React

2 Answers2

props vs this.props

Methods

.bind(this)

`props` vs `this.props`

`.bind(this)`