CODEWITHSUNDEEP
javascript
dnp_akil
dnp_akil

Reputation: 105

Conditional Rendering in react js functional component

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;

Upvotes: 9

Views: 25883

Answers (3)

Hadiyal Hasti
Hadiyal Hasti

Reputation: 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;

Upvotes: -1

maazadeeb
maazadeeb

Reputation: 6112

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>

Upvotes: 1

Grant Singleton
Grant Singleton

Reputation: 1651

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

Upvotes: 15

Related Questions