how to load a different component on click

Question

I am trying to accomplish something similar to Single Page. I have the screen below:

and I would like to replace this content by another one. When you click on Add More credits to transition to the screen below and use the left arrow to return to the membership display:

I do not know which path to follow. Parent-Child ?

Any idea or examples are welcome

Thanks

Does this answer your question? [how to navigate from one page to another in react js?](https://stackoverflow.com/questions/37295377/how-to-navigate-from-one-page-to-another-in-react-js) — Luke Storry, Jul 22 '20 at 00:10
@LukeStorry it's not because I do not want to go to another page using `Route` I really try to replace the content. Basically, I am in a setting page without multiple tabs. One tab show me my membership. In the same tab, I would like to replace the content by the one speaking about the "Credit bundles" and be able to come back to membership when clicking on the back arrow — Seb, Jul 22 '20 at 00:20

Luke Storry · Accepted Answer · 2020-07-22T00:30:50.730

Use state to store a string identifying which tab you want to be open, make the button click set that state, then use Conditional Rendering to only render the tab you want.

Super simplified snippet, but I hope you get the idea:

function CreditBundlesComponent() { return <h2> Credit Bundles</h2> }
function MembershipComponent(){ return <h2>Membership</h2> }

function App() {
  const [currentTab, setCurrentTab] = React.useState("MEMBERSHIP");
  return (
    <div>
       <button onClick={() => setCurrentTab("MEMBERSHIP")}>Membership</button>
       <button onClick={() => setCurrentTab("CREDIT")}>Credit Bundles</button>
       {(currentTab==="MEMBERSHIP") && <MembershipComponent/>}
       {(currentTab==="CREDIT") && <CreditBundlesComponent/>}
    </div>
  );
}

ReactDOM.render( <App /> , document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

how to load a different component on click

1 Answers1