Условно визуализировать элемент на основе переключения и нажатия

Question

Я пытаюсь отобразить элемент на основе тумблера. Если переключатель имеет значение false и вы нажмете кнопку, он отобразит один элемент. Если переключатель имеет значение true, он будет отображать другой. Я знаю, что я близко, но я не могу получить последнюю часть. Вот то, что у меня есть:

const HonestSlogan = (
  <div>
    <p>"Air Force: Come in, have a seat."</p>
    <p>"Navy: 5,000 dudes surrounded by water."</p>
    <p>"Army: A sh*tty job for anyone and everyone."</p>
    <p>"Marine Corps: Marines for-f*ucking-ever."</p>
  </div>
);
const Slogan = (
  <div>
    <p>"Air Force: Aim High, Fly-Fight-Win"</p>
    <p>"Navy: Forged by the Sea"</p>
    <p>"Army: Army Strong"</p>
    <p>"Marine Corps: The Few, The Proud"</p>
  </div>
);
function App() {
  const [value, setValue] = useState(false);
  const handleBtn = () => {
    Toggle.isOn = value ? (
      <div id="para">{HonestSlogan}</div>
    ) : (
      <div id="para">{Slogan}</div>
    );
  };
  return (
    <div className="App">
      <h1>Military Slogans</h1>
      <Toggle
        isOn={value ? console.log(HonestSlogan) : console.log(Slogan)}
        handleToggle={() => setValue(!value)}
      />
      <div>
        <button onClick={handleBtn}>Check Slogan</button>
      </div>
    </div>
  );
}

export default App;

Вот компонент Toggle:

const Toggle = ({ isOn, handleToggle }) => {
  return (
    <div className="toggle-title">
      <div>Official Slogan</div>
      <label className="switch">
        <input type="checkbox" checked={isOn} onChange={handleToggle} />
        <span className="slider round"></span>
      </label>
      <div>Honest Slogan</div>
    </div>
  );
};
export default Toggle;

Вот мой полный код для codeandbox: https://codesandbox.io/s/militaryslogans-2z9w8 Спасибо за помощь.

Answer 1

Добавить состояние showSlogan, вызываемое нажатием кнопки, которая сбрасывается при обновлении значения переключателя. Используйте значение showSlogan вместе с троичным для value, чтобы отобразить один слоган div или другой. Примечание: В вашей песочнице отсутствовал контент в вашем Toggle компоненте, поэтому я добавил то, что вы опубликовали здесь.

import React, { useState } from "react";
import "./App.css";
import Toggle from "./Toggle";

const HonestSlogan = (
  <div>
    <p>"Air Force: Come in, have a seat."</p>
    <p>"Navy: 5,000 dudes surrounded by water."</p>
    <p>"Army: A sh*tty job for anyone and everyone."</p>
    <p>"Marine Corps: Marines for-f*ucking-ever."</p>
  </div>
);

const Slogan = (
  <div>
    <p>"Air Force: Aim High, Fly-Fight-Win"</p>
    <p>"Navy: Forged by the Sea"</p>
    <p>"Army: Army Strong"</p>
    <p>"Marine Corps: The Few, The Proud"</p>
  </div>
);
function App() {
  const [value, setValue] = useState(false);
  const [showSlogan, setSetSlogan] = useState(false); // add a toggle for showing slogan
  const handleBtn = () => {
    setSetSlogan(true); // set show slogan true when clicked
  };
  return (
    <div className="App">
      <h1>Military Slogans</h1>
      <Toggle
        isOn={value ? console.log(HonestSlogan) : console.log(Slogan)}
        handleToggle={() => {
          setValue(!value);
          setSetSlogan(false); // disable show slogan when toggle changes
        }}
      />
      <div>
        <button onClick={handleBtn}>Check Slogan</button>
        { showSlogan && (value ? Slogan : HonestSlogan)} // selectively render slogan if show is true and then pick which slogan div to display
      </div>
    </div>
  );
}

export default App;