Conditional Rendering in React Logical Operators

Firstly, I want to discuss why conditional rendering is important. Like when you are developing a website and there is a search feature on your website, if you search, search results will show up. Now if there are no results on your website, the user will expect that there is no results component. This is just one example; conditional rendering has an infinite number of applications.

So let’s take an example of quiz application , please look upon this article before —

Improving Our Quiz App React .js — L6

I just want to add one functionality: show and hide. If I click "show" it will show us the answer and When I click hide it will hide the answer .

So if you read the previous article, you may have noticed that we are using a dummy file to read the data.

There is tiny modification in dummy file , we are going to add the answers also -

const quiz = [
  {
Question: "Who was the first president of India?" ,
    options: [
      "Mahatma Gandhi",
      "Pt. Nehru",
      "Sardar B. Patel",
      "Dr. Rajendra Prasad"
    ],
    ans: "4"
  },
  {
    Ques: "Who was the first prime minister of india?",
    options: [
      "Mahatma Gandhi",
      "Pt. Nehru",
      "Sardar B. Patel",
      "Dr. Rajendra Prasad"
    ],
    ans: "2"
  }
];
export default quiz;

And now we will show the answer, so we can add a new component Answer.js

const Answer = (props) => {
  const ans = props.ans;
  return (
    <>
      <h2> Answer : {ans}</h2>
    </>
  );
};

export default Answer;

We have to import this in the App.js -

import Answer from "./components/Answer";
import Options from "./components/Options";
import Question from "./components/Ques";
import quiz from "./Dummy";
import "./styles.css";

const Quiz = () => {
  return (
    <>
      {quiz.map((ques, i) => (
        <>
          <Question ques={ques.Ques} />
          <Options options={ques.options} />
          <Answer ans={ques.ans}/>
        </>
      ))}
    </>
  );
};
const App = () => {
  return (
    <div>
      <Quiz />
    </div>
  );
};
export default App;

Now I am adding two buttons for show and hide , and also there will be a state and event handler -

import { useState } from "react";
import Answer from "./components/Answer";
import Options from "./components/Options";
import Question from "./components/Ques";
import quiz from "./Dummy";
import "./styles.css";

const Quiz = () => {
  const [view, setView] = useState(false);
  const handleClick = (view) => {
    setView(!view);
  };
  return (
    <>
      {quiz.map((ques, i) => (
        <>
          <Question ques={ques.Ques} />
          <Options options={ques.options} />
          {!view && (
            <button onClick={() => handleClick(view)}>View Answer</button>
          )}
          {view && (
            <>
              <button onClick={() => handleClick(view)}>Hide Answer</button>
              <Answer ans={ques.ans}/>
            </>
          )}
        </>
      ))}
    </>
  );
};
const App = () => {
  return (
    <div>
      <Quiz />
    </div>
  );
};
export default App;

I am explaining this code , I’ve defined view default false state . When the view is false, we don’t have to show the answer. When view is true, we will show the answer, and we can also add the feature to hide the answer.

Now there is one issue; it’s up to you how you will tackle this. When I click any button, the functionality is applied in every view. When I clicked Hide Answer, every answer was hidden. When I click "Show answer" for specific questions, every answer appears.

Prior to my update, send a solution.

Answer.js

import { useState } from "react";
const Answer = (props) => {
  const ans = props.ans;
  const [view, setView] = useState(false);
  const handleClick = (view) => {
    setView(!view);
  };
  return (
    <>
      {!view && <button onClick={() => handleClick(view)}>View Answer</button>}
      {view && (
        <>
          <button onClick={() => handleClick(view)}>Hide Answer</button>
          <h4>Answer: {ans}</h4>
        </>
      )}
    </>
  );
};

export default Answer;

App.js

import Answer from "./components/Answer";
import Options from "./components/Options";
import Question from "./components/Ques";
import quiz from "./Dummy";
import "./styles.css";

const Quiz = () => {
  return (
    <>
      {quiz.map((ques, i) => (
        <>
          <Question ques={ques.Ques} />
          <Options options={ques.options} />
          <Answer ans={ques.ans} />
        </>
      ))}
    </>
  );
};
const App = () => {
  return (
    <div>
      <Quiz />
    </div>
  );
};
export default App;

Now update your code it will work fine . Now every Answer Component has different state for different question . That was the glitch .