How come I can't navigate to the next page?

Question

I'm trying to navigate to another component upon the Food Truck button being clicked. In the nextPage() function, I'm trying to make that happen but it just keeps throwing me an error.

How can I go from page to the next when clicking a button?

Note: I want to go to a totally different page, not stay on the same page.

import React, { Component } from "react";
import fire from "../../config/Fire";
import classes from "./Home.css";
import Aux from "../../hoc/Aux";
import Taco from "../../components/taco/Taco";

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      taco: {}
    };
  }

  nextPage() {
    return this.state.taco ? <Taco /> : <Home />;
  }

  render() {
    return (
      <Aux>
        <h1 className={classes.ChooseTruck}>Choose your favorite truck!</h1>
        <button
          type="button"
          className="btn btn-outline-primary btn-lg btn-block"
          onClick={this.nextPage}
        >
          Food Truck
        </button>
      </Aux>
    );
  }
}

export default Home;

See [here](https://stackoverflow.com/questions/40079797/reactjs-navigation/40080108) for more information on routing in React. — FK82, Jul 29 '18 at 11:56
@FK82 I'll look into that, thanks for sharing. But how come it doesn't work the way I'm doing it? — sp92, Jul 29 '18 at 11:59
@sp92 Idk. What you do right now is called [conditional rendering](https://reactjs.org/docs/conditional-rendering.html) which is super standard. I don't see why it wouldn't work unless something else also went wrong. Can you post the error? — FK82, Jul 29 '18 at 12:02
@FK82 The error I'm getting in the console (upon clicking the button) says: `Uncaught TypeError: Cannot read property 'state' of undefined` and it's pointing to the line that contains: `return( this.state.taco ? : ());`. I had a feeling that this was the line causing the problem. — sp92, Jul 29 '18 at 12:07
@sp92 Seems like your `nextPage` method is not bound to the instance. Try binding `nextPage` to the component instance in the constructor: i.e. add this line to the constructor body `this.nextPage = this.nextPage.bind(this);`. — FK82, Jul 29 '18 at 12:10
@sp92 Binding `taco` will throw an error (and it's unnecessary to bind it). But otherwise, that's it. — FK82, Jul 29 '18 at 12:57

sp92 · Answer 1 · 2018-07-29T13:22:07.673

Hey guys I figured out what I did wrong :D Here's how you conditionally render if anyone else needs a reference on how to do so :D.

-I had to bind taco in the constructor i.e. this.taco = this.taco.bind(this);

-Create a state called flag and set it equal to false i.e. this.state {flag: false}

-Inside the nextPage() method, I had to set the state to true in order to be used later i.e. this.setState({flag: true});

-Inside render(), I set a variable called flag equal to the state of flag i.e. const flag = this.state.flag; which WAS initially false but afterwards set to true upon clicking the button which invokes nextPage()

-Finally, we check if flag is set equal true. If it's true, then return the component I'm trying to navigate to which's <Taco/>

import React, {Component} from 'react';
import fire from '../../config/Fire';
import classes from './Home.css';
import Aux from '../../hoc/Aux';
import Taco from '../../components/taco/Taco';

class Home extends Component {
constructor(props) {
    super(props);
    this.taco = this.taco.bind(this);
    this.state = {
        flag: false
    }
}

nextPage() {
    this.setState({flag: true});
}

render() {
    const flag = this.state.flag;

    if(flag) {
      return <Taco/>;
    }

    return (
        <Aux>
            <h1 className={classes.ChooseTruck}>Choose your favorite truck!</h1>
            <button
                type="button"
                className="btn btn-outline-primary btn-lg btn-block"
                onClick={this.nextPage}>Food Truck
            </button>
        </Aux>
    );
  }
}

export default Home;

Earlier you tried to return component in handler. You could use setState (to save in state.taco next component) and use this.state.taco in render. This is simple schema - you can use array/object to display more 'steps'/views - w/o using routing. — xadm, Jul 29 '18 at 19:53
@sp92 I just spent the better half of an hour working on your tic-tac-toe board, and you deleted your question! :( I implemented the entire thing using redux, and redux-saga (For the side-effects of the delayed AI click). You can see the updated sandbox [here](https://codesandbox.io/s/oq5r251o1z), and play around with it. — Blue, Oct 18 '18 at 15:02
@FrankerZ haha, I'm sorry, I was trying so hard to come with a solution myself and I deleted out of frustration. But thanks a lot, greatly appreciated. I shouldn't have deleted in the 1st place. I undeleted it. — sp92, Oct 18 '18 at 15:11

score 0 · Answer 2 · answered Jul 29 '18 at 12:03

0

It is not possible to navigate to different screen with just pure React library. If you only use React without any navigation libraries, it means that you can only have a SPA(Single Page Application).

Try to research this github link https://github.com/ReactTraining/react-router. Or just navigate to the official documentation in here https://reacttraining.com/react-router/.

answered Jul 29 '18 at 12:03

Timothy Alfares

297
1
6

2

SPA includes also navigation within different states (so screens if you like to call them in this way) – quirimmo Jul 29 '18 at 12:06

How come I can't navigate to the next page?

2 Answers2