Conditional Rendering in react js functional component

Question

I want to render two components ( TodoDone and TodoRemaining ) in this TodoDisplay component

The default render should be TodoRemaining but somehow there should be a onClick handler to render TodoDone component.

Can anyone suggest a way to achieve it ?

import React, { useState, useEffect } from "react";
import TodoRemaining from "../TodoRemaining/TodoRemaining";
import TodoDone from "../TodoDone/TodoDone";
import { DoneTodoProvider } from "../Context/DoneTodoContext";

const TodoDisplay = () => {
  const [isPreview, setIsPreview] = useState(true);

  if (isPreview) {
    return (
      <div>
        <DoneTodoProvider>
          <TodoRemaining />
        </DoneTodoProvider>
      </div>
    );
  } else {
    return (
      <DoneTodoProvider>
        <TodoDone />
      </DoneTodoProvider>
    );
  }
};

export default TodoDisplay;

Answer 1

You could do it like this:

const TodoDisplay = () => {
  const [isPreview, setIsPreview] = useState(true);

  if (isPreview) {
    return (
      <div>
        <DoneTodoProvider>
          <TodoRemaining />
        </DoneTodoProvider>
        <Button onClick={() => setIsPreview(false)}>flip</Button>
      </div>
    );
  } else {
    return (
      <DoneTodoProvider>
        <TodoDone />
      </DoneTodoProvider>
      <Button onClick={() => setIsPreview(true)}>flip</Button>
    );
  }
};

export default TodoDisplay;

A cleaner way:

    return (
      <div>
        <DoneTodoProvider>
          {isPreview? 
            <TodoRemaining />
          :
            <ToDoDone />
          }
        </DoneTodoProvider>
        <Button onClick={() => setIsPreview(!isPreview)}>flip</Button>
       </div>
    );

Answer 2

You could add a checkbox to toggle isPreview and call it on like a checkbox's change event.

const { useState, useEffect } = React;
const TodoRemaining = () => <div>Remaining</div>;
const TodoDone = () => <div>Done</div>;

const TodoDisplay = () => {
  const [isPreview, setIsPreview] = useState(true);

  return (
    <div>
      {isPreview ? <TodoRemaining /> : <TodoDone />}
      <label htmlFor="change">
        <input
          type="checkbox"
          id="change"
          onChange={() => setIsPreview(!isPreview)}
        />
        Change
      </label>
    </div>
  );
};

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

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