implementing Router to change pages in React.js

Question

I am making a react.js shopping list app I have it so that you input the values and can print them out into a table. This is my first time using react and I want to have my table on a separate page I am aware of ROUTER method but am having trouble implementing it.

Here is my code note: I have not added any thing to navigate between pages yet but i want the print button to navigate to from App.js to Details.js

import NavBar from "./components/navbar";
import "./App.css";
import Counters from "./components/counters";
import Details from "./Details";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

class App extends Component {
  state = {
    counters: [
      //example of objects in array
      /*{ id: 1, value: 2, text: "hi" },*/
    ],
  };
  constructor(props) {
    super(props);
    console.log("app- constructor");
  }

  componentDidMount() {
    console.log("app- mouneted");
  }

  handleIncrement = (counter) => {
    const counters = [...this.state.counters];
    const index = counters.indexOf(counter);
    counters[index] = { ...counter };
    counters[index].value++;
    this.setState({ counters });
  };

  handleDecrement = (counter) => {
    const counters = [...this.state.counters];
    const index = counters.indexOf(counter);
    counters[index] = { ...counter };
    counters[index].value--;
    this.setState({ counters });
  };

  handleReset = () => {
    const counters = this.state.counters.map((c) => {
      c.value = 0;
      return c;
    });
    this.setState({ counters });
  };

  handleName = () => {
    var name = prompt("name");
    return name;
  };

  handleCreate = () => {
    const create = this.state.counters.length + 1;
    const counter = this.state.counters.push({
      id: create,
      value: 0,
      text: this.handleName(),
    });
    this.setState({ counter });
  };

  handleDelete = (counterId) => {
    const counters = this.state.counters.filter((c) => c.id !== counterId);
    this.setState({ counters });
  };

  handleInfo = () => {
    let x;
    //loops through all tems and adds the to the list
    for (x = 0; x <= this.state.counters.length; x++) {
      //breaks loop if x is == to counters array
      if (this.state.counters.length == x) {
        break;
      }
      const info = this.state.counters[x]["text"];
      const quantity = this.state.counters[x]["value"];
      console.log(info, quantity);

      //creates rows based on input
      var table = document.getElementById("myList");
      var row = table.insertRow(1);
      var itemCell = row.insertCell(0);
      var quantityCell = row.insertCell(1);
      itemCell.innerHTML = info;
      quantityCell.innerHTML = quantity;
    }
    //calls the print function
    return <a href="http://localhost:3000/Details"></a>;
  };

  render() {
    console.log("rendered");
    return (
      <React.Fragment>
        <NavBar
          totalCounters={this.state.counters.filter((c) => c.value > 0).length}
        />

        <main className="container">
          <Counters
            counters={this.state.counters}
            onReset={this.handleReset}
            onCreate={this.handleCreate}
            onIncrement={this.handleIncrement}
            onDecrement={this.handleDecrement}
            onDelete={this.handleDelete}
            onInfo={this.handleInfo}
          />
        </main>

        <div>
          <table bordered id="myList">
            <tr>
              <th>Items</th>
              <th>Quantity</th>
            </tr>
          </table>
        </div>
        <style>
          {`
          th{
            border: 2px solid black;
            padding: 2px;
            min-width: 100px;
            font-size: 22px;
            font-style: bold;
          }
          
          td{
            border: 2px solid black;
            padding: 2px;
            min-width: 100px;
            font-size: 18px;
          }

        
          `}
        </style>
      </React.Fragment>
    );
  }
}

export default App;

this is what my app looks like but I want the table to be on a Details page any help is appreciated

Daly · Accepted Answer · 2020-12-23 19:46:19Z

1

Router is not a method but rather a component which wraps the application. Inside of Router, the Switch component wraps several instances of Route, which in turn wrap the components which are to be rendered when that route is hit. Finally the Link component is used to build links to various Route instances. All together it looks something like this:

import { 
    BrowserRouter as Router, 
    Switch, 
    Route,
    Link
} from "react-router-dom";

<Router>
    <Switch>

        <Route exact path="/">
            <div>

                ...insert home page here...

                <Link to="/details">Click here to go to details page!</Link>

            </div>
        </Route>

        <Route path="/details">
            ...details page/component here...
        </Route>

    </Switch>
</Router>

See the React Router Tutorial for more information.

edited Dec 23, 2020 at 19:46

answered Dec 22, 2020 at 2:10

Daly

8792 gold badges13 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

moawwad Over a year ago

is It possible to put it into the return of a function or will that not work?

moawwad Over a year ago

Ok, i have added that and i do have a link and it does go to my localhost:3000/Details ..... but It keeps all the same components of the same page although i have nothing in my Details.js. does anyone have any idea why

Daly Over a year ago

Yes, that should be returned by the render function. If there is any content within the switch but outside the Routes, that will be rendered on both pages. If that isn't the issue try pass the prop exact to the / route. I've edited the example above to reflect this.

moawwad Over a year ago

Thanks so much that worked. It was much more complicated than I thought tbh, before learning react i did all my projects in vanilla JavaScript and it was much easier to change pages

Collectives™ on Stack Overflow

implementing Router to change pages in React.js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related