通过使用 state 和道具进行渲染，是否有更好的方法来更改组件？

Question

I'm new to Next.js & ReactJS, recently I have to make component to render different child in parent component by onClick in DOM element to change state. so I have an approached to using setState and pass props to choose which child component to be rendered like this:

1. The button

  <div className={styles.leftFrame}>
        {" "}
        <div
          className="d-flex flex-column"
          style={{
            rowGap: "16px",
          }}
        >
          {" "}
  
          <div className={`d-flex flex-column ${styles.whiteFrame}`}>
            <div onClick={() => setrightFrame("main")}>
              {" "}
              <ClassRoomBtn
                type="other"
                className="CPE326 Coding in AI"
                classTime="17:00 น."
              />
            </div>

            <div>
              <button
                className="secondaryButton"
                style={{ width: "100%" }}
                onClick={() => setrightFrame("createClass")}
              >
                <h5>สร้างห้องเรียน</h5>
              </button>
            </div>
          </div>
        </div>
      </div>

2. the part that I prefer it be rendered

     </div>
        {rightFrame === "createClass" && (
          <RightFrame page="create" user={user} />
        )}
        {rightFrame === "main" && <RightFrame page="main" user={user} />}
      </div>

I think that if I have more child component to render in parent component, I have to do like this again (by setState for parent to know/ pass props to render different child component) or is there any better way to render because my approach maybe make my project hard to develop furthur.

Answer 1

You can match the rightFrame state to the page and simply do:

<RightFrame page={rightFrame} user={user} />

instead of doing setRightFrame("createClass") do setRightFrame("create") to match the page prop on your <RightFrame />