title: Conditional Rendering in react js functional component
body: <p>I want to render two components ( TodoDone and TodoRemaining ) in this TodoDisplay component</p>
  <p>The default render should be TodoRemaining but somehow there should be a onClick handler to render TodoDone component.</p>
  <p>Can anyone suggest a way to achieve it ?</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import TodoRemaining from &quot;../TodoRemaining/TodoRemaining&quot;;
  import TodoDone from &quot;../TodoDone/TodoDone&quot;;
  import { DoneTodoProvider } from &quot;../Context/DoneTodoContext&quot;;
  
  const TodoDisplay = () =&gt; {
    const [isPreview, setIsPreview] = useState(true);
  
    if (isPreview) {
      return (
        &lt;div&gt;
          &lt;DoneTodoProvider&gt;
            &lt;TodoRemaining /&gt;
          &lt;/DoneTodoProvider&gt;
        &lt;/div&gt;
      );
    } else {
      return (
        &lt;DoneTodoProvider&gt;
          &lt;TodoDone /&gt;
        &lt;/DoneTodoProvider&gt;
      );
    }
  };
  
  export default TodoDisplay;
  
  </code></pre>