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;

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;

• javascript

• You have already done it. All you need is to change isPreview onClick by adding a button and a onClick handler function which flips the boolean value of isPreview – Grant Singleton Commented Jul 16, 2020 at 12:57
• yes, but where should i add ? – dnp_akil Commented Jul 16, 2020 at 12:59
• under each DoneTodoProvider ? – dnp_akil Commented Jul 16, 2020 at 13:00
• Yes in this case that would make sense. It can be anywhere you want it just needs to be accessible in each version of the render. – Grant Singleton Commented Jul 16, 2020 at 13:01

3 Answers 3

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>
    );

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>

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;