How to change component that is rendered?

user_16012261 0
Viewed 50

I'm super new to React.js. I'm making changeable layouts using React.js. so i tried to use useState for rendering specific layout that I should click. so I tried to add setState for changing false in a function and made one another setState in the same function. but Too many re-renders Error came out. so what can i use for making changeable layout??

this is my code

import React, { useState } from "react";
import Panel from "./Panel";
import PanelTwo from "./PanelTwo";
import styled from "styled-components";
export default function Layout() {
  const [showPanel, setShowPanel] = useState(false);
  const [showPanel1, setShowPanel1] = useState(false);
  const handleOnClick = () => setShowPanel(true);
  const handleOnClick1 = () => setShowPanel1(true);

  return (
    <div>
      <Main>
        <div onClick={handleOnClick}>
          <h1>Panel (1+3)</h1>
        </div>
        <div onClick={handleOnClick1}>
          <h1>Panel (2+2) </h1>
        </div>

        <div>
          <h1>Panel (2+3)</h1>
        </div>

        <div>
          <h1>Panel (2+4)</h1>
        </div>

        <div>
          <h1>Panel (3+1)</h1>
        </div>

        <div>
          <h1>Panel (3+2)</h1>
        </div>
      </Main>
      {showPanel ? <Panel /> : null}
      {showPanel1 ? <PanelTwo /> : null}
    </div>
  );
}

and if i do this, it looks like this when i click two buttons enter image description here

so i tried this .

 const [showPanel, setShowPanel] = useState(false);
  const [showPanel1, setShowPanel1] = useState(false);
  const handleOnClick = () => setShowPanel(true);
  const handleOnClick1 = () => setShowPanel(false);
  setShowPanel1(true);

and i got Too many re-renders Error.

this is what i want to do enter image description here when i click each buttons then the exact only one layout is gonna show up . but the problem is that it's overlapped when i click two buttons like this enter image description here I'm sorry if my explanation is not good.

react-hooks reactjs javascript
1 Answers

It seems like you really just want to toggle between the two layouts. You can do this with a single state value, callback, and conditional render via ternary.

export default function Layout() {
  const [showPanel, setShowPanel] = useState(false);

  const handleOnClick = () => setShowPanel(show => !show);

  return (
    <div>
      <Main>
        <div onClick={handleOnClick}>
          <h1>Panel (1+3)</h1>
        </div>
        <div onClick={handleOnClick}>
          <h1>Panel (2+2) </h1>
        </div>

        ...
      </Main>
      {showPanel ? <Panel /> : <PanelTwo />}
    </div>
  );
}

OFC, this assumes you want to always show at least one of the layouts. If you want to start with both initially hidden (i.e. false) then you can toggle the other panel state false in the handlers to do that.

export default function Layout() {
  const [showPanel, setShowPanel] = useState(false);
  const [showPanel1, setShowPanel1] = useState(false);

  const handleOnClick = () => {
    setShowPanel(true);
    setShowPanel1(false);
  };

  const handleOnClick1 = () => {
    setShowPanel(false);
    setShowPanel1(true);
  };

  return (
    <div>
      <Main>
        <div onClick={handleOnClick}>
          <h1>Panel (1+3)</h1>
        </div>
        <div onClick={handleOnClick1}>
          <h1>Panel (2+2) </h1>
        </div>

        ...
      </Main>
      {showPanel && <Panel />}
      {showPanel1 && <PanelTwo />}
    </div>
  );
}
user_86908570
Related