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;

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
– Grant Singleton, Commented Jul 16, 2020 at 12:57
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
– Grant Singleton, Commented Jul 16, 2020 at 13:01

Grant Singleton · Accepted Answer · 2020-07-16 13:03:54Z

15

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

edited Jul 16, 2020 at 13:03

answered Jul 16, 2020 at 13:00

Grant Singleton

1,65110 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Grant Singleton Over a year ago

Glad it worked! I have also added a cleaner solution to this since you don't duplicate code

maazadeeb · Accepted Answer · 2020-07-16 13:07:25Z

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>

Alex Tom · Accepted Answer · 2022-06-03 12:55:22Z

-1

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;

edited Jun 3, 2022 at 12:55

Alex Tom

2214 silver badges12 bronze badges

answered Jun 3, 2022 at 5:57

Hadiyal Hasti

1

Collectives™ on Stack Overflow

Conditional Rendering in react js functional component

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related