error TS2698: Spread types may only be created from object types. How do I fix this error?

Viewed 2024

I have a HOC in my react application here is the code.

export function checkToken<Props>(WrappedComponent: new() => React.Component<Props, {}>) {
    return (
        class PrivateComponent extends React.Component<Props, LocalState> {
            constructor() {
                super();
                this.state = {
                    isAuthed: false
                }
            }

            async componentDidMount() {
                let token = localStorage.getItem('dash-token');
                let config = {
                    headers: { 'x-access-token': token }
                }
                let response = await axios.get(`${url}/users/auth/checkToken`, config)
                if (!response.data.success) {
                    localStorage.removeItem('dash-token');
                    browserHistory.push('/login');
                } else {
                    this.setState({isAuthed: true});
                }
            }

            render() {
                let renderThis;
                if (this.state.isAuthed) {
                    renderThis = <WrappedComponent {...this.props} />
                }
                return (
                    <div>
                        {renderThis}
                    </div>
                )
            }
        }
    )
}

When running this app I get the following error.

error TS2698: Spread types may only be created from object types.

It would seem that there is an issue with my spread syntax when I am passing down the props {...this.props}.

This is where I am using this HOC.

const app = document.getElementById('root') as HTMLElement;
ReactDOM.render(
  <Router history={browserHistory}>
    <Route path={'/'} component={App}>
      <IndexRoute component={checkToken(ListPage)} />
      <Route path={'/terms-page/:id'} component={checkToken(TermsPage)} />
      <Route path={'/default-settings'} component={checkToken(DefaultSettings)} />
      <Route path={'/login'} component={LoginPage} />
      <Route path={'/logout'} component={Logout} />
    </Route>
  </Router>
,app);

Also to be clear this is a compile time error.

Where am I going wrong?

0 Answers
Related