How can I make a button change what components are showing in react native?

Question

So I'm a bit of a beginner to react native, and I'm making an app. I'm using react navigation to get a bottom navigation bar, but I want to make it so that within one of my pages, the user can press a button to change a component. Check out this quick mock-up I made:

Basically, I want to make it so that when the user hits button 1, component 1 appears, but when the user hits button 2, component 2 appears instead. How do I show/hide components? Also how would I implement the buttons?

I know this question sounds rather basic but I really couldn't find any kind of tutorial on it. If you have the answer or can at least point me in the direction of a video or blog post that would answer my question, thank you very much!

Does this answer your question? React Conditional Render and Navbar Basically, create a state that stores the active button. And render your components conditionally React Conditional Rendering — Ugur Eren
– Ugur Eren, Commented Jul 23, 2021 at 4:57

Siva Kondapi Venkata · Accepted Answer · 2021-07-23 05:09:03Z

1

Check the snippet here. Maintain state for selected nav time (button click), Then do conditional render based selected content type.

const actions = [
  { name: "button 1", type: "b1" },
  { name: "button 2", type: "b2" },
];

const Component = () => {
  const [contentType, setContentType] = React.useState("b1");

  const Content1 = () => <div> Content1 here </div>;
  const Content2 = () => <div> Content2 here </div>;

  return (
    <div>
      <div>
        {actions.map((action) => (
          <button
            key={action.type}
            style={{
              backgroundColor:
                action.type === contentType ? "lightblue" : "white",
            }}
            onClick={() => setContentType(action.type)}
          >
            {action.name}
          </button>
        ))}
      </div>
      <div style={{ marginTop: 20 }}>
        {contentType === "b1" && <Content1 />}
        {contentType === "b2" && <Content2 />}
      </div>
    </div>
  );
};

ReactDOM.render(<Component />, document.getElementById("app"))

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>


<div id="app"></div>

answered Jul 23, 2021 at 5:09

Siva Kondapi Venkata

11.1k2 gold badges20 silver badges32 bronze badges

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

1 Comment

Zev Ross Over a year ago

Thank you! I'll have to try this out to make sure it's exactly what I'm looking for, but thank you so much!

Collectives™ on Stack Overflow

How can I make a button change what components are showing in react native?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related