How to send props to component without rendering

Question

I'm wondering how to send props from one component (page) to the next after clicking the button without rendering a new component on the same page because this will be part of the next page. In this case I want to send props selects from (in /memo) to in (/memo/start) and do this in function startMemo() Code:

Memo.js

import React, { useState } from "react";
import { Link, Route } from "react-router-dom";
import MemoStart from "./MemoStart";

const Memo = () => {
  const [selects, setSelects] = useState([]);
  const startMemo = () => {
    const selectId = "1";
    const selectCat = "Number";
    const selectLang1 = "english";
    const selectLang2 = "german";
    console.log(selectId, selectCat, selectLang1, selectLang2);
    setSelects([selectId, selectCat, selectLang1, selectLang2]);
    console.log("selects:", selects);

    return <MemoStart selects={selects}/>;
  };

  return (
    <Link to="/memo/start" className="button" onClick={startMemo}>
      Start
    </Link>
  );
};

export default Memo;

MemoStart.js

import React from "react";

const MemoStart = ({ selects }) => {
  console.log({ selects });
  return (
    <main className="main">
      <div className="word__card">
        <span className="word__card-title">Choose category: </span>
        <ul>{selects}</ul>
      </div>
    </main>
  );
};

export default MemoStart;

Main file: App.js

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import "./styles.css";
import Menu from "./Menu";
import Memo from "./components/Memo";
import MemoStart from "./components/MemoStart";

export default function App() {
  return (
    <div className="App">
      <Router>
        <Menu />
        <Switch>
          <Route exact path="/memo" component={Memo} />
          <Route path="/memo/start" component={MemoStart} />
        </Switch>
      </Router>
    </div>
  );
}

Menu.js

import React, { useState } from "react";
import { Link } from "react-router-dom";

const Menu = () => {
  return (
    <nav className="menu">
      <ul className="menu__list">
        <Link to="/memo" className="menu__list-item">
          Memo
        </Link>
      </ul>
    </nav>
  );
};

export default Menu;

simplest is using routeParams – Sheelpriy Sep 21 '20 at 09:06 — Sheelpriy, Sep 21 '20 at 09:06

Tasos · Accepted Answer · 2020-09-21T09:35:14.947

To prevent the route transition, you need to do it programmatically after you run your startMemo function, something like this I guess:

import React, { useState } from "react";
import { Link, Route, withRouter } from "react-router-dom";
import MemoStart from "./MemoStart";

const Memo = (props) => {   // <=== NOTICE THIS
  const [selects, setSelects] = useState([]);
  const startMemo = () => {
    const selectId = "1";
    const selectCat = "Number";
    const selectLang1 = "english";
    const selectLang2 = "german";
    console.log(selectId, selectCat, selectLang1, selectLang2);
    setSelects([selectId, selectCat, selectLang1, selectLang2]);
    console.log("selects:", selects);

    return <MemoStart selects={selects}/>; // <=== THIS IS WRONG!
  };

  linkClick = () => {    // <=== NOTICE THIS
    startMemo();
    props.history.push('/memo/start');
  }
  return (
    <div className="button-link" onClick={linkClick}> // <=== NOTICE THIS
      Start
    </div>
  );
};

export default withRouter(Memo);   // <=== NOTICE THIS

The return <MemoStart selects={selects} /> is wrong. Use something like this instead

linkClick = () => {    // <=== NOTICE THIS
  startMemo();
  props.history.push({
    pathname: '/memo/start',
    state: { selects }
  });
}

and in the MemoStart component use this to access the selects:

props.location.state.selects

Just be sure that location is present in the props of MemoStart

Thank you for that :) Now I have to fix and learn how to change this return — Arex Speed, Sep 21 '20 at 09:29

How to send props to component without rendering

1 Answers1