Kevin Powell - Community•2mo ago

Problem with the container background

I'm using a ternary operator, and transparent is not working, but "#343964" is working. I was able to hide the content of the container, but not the background.

import React from "react";
import Questions from "./Questions";
import QuizResults from "./QuizResults";

export default function Main({ isQuizCompleted }) {
    
    return (
        <div className="container" style={{
            backgroundColor: isQuizCompleted ? 'transparent' : '#343964'}}>
            {/* Only render Questions if the quiz is not completed */}
            {!isQuizCompleted && <Questions />}
            
            {/* Render QuizResults when the quiz is completed */}
            <QuizResults isQuizCompleted={isQuizCompleted} />
        </div>
    );
}

import React from "react";
import Questions from "./Questions";
import QuizResults from "./QuizResults";

export default function Main({ isQuizCompleted }) {
    
    return (
        <div className="container" style={{
            backgroundColor: isQuizCompleted ? 'transparent' : '#343964'}}>
            {/* Only render Questions if the quiz is not completed */}
            {!isQuizCompleted && <Questions />}
            
            {/* Render QuizResults when the quiz is completed */}
            <QuizResults isQuizCompleted={isQuizCompleted} />
        </div>
    );
}

12 Replies

devF•2mo ago

You can conditionally set the display property of the container when the quiz is completed: import React from "react"; import Questions from "./Questions"; import QuizResults from "./QuizResults"; export default function Main({ isQuizCompleted }) { return ( <div className="container" style={{ backgroundColor: isQuizCompleted ? 'transparent' : '#343964', display: isQuizCompleted ? 'none' : 'block' // Hide the container when the quiz is completed }} > {/* Only render Questions if the quiz is not completed /} {!isQuizCompleted && <Questions />} {/ Render QuizResults when the quiz is completed /} <QuizResults isQuizCompleted={isQuizCompleted} /> </div> ); } You also instead of keeping the div always rendered, you can render the div conditionally based on whether the quiz is completed or not: import React from "react"; import Questions from "./Questions"; import QuizResults from "./QuizResults"; export default function Main({ isQuizCompleted }) { return ( <> {/ Only render Questions and the container if the quiz is not completed */} {!isQuizCompleted ? ( <div className="container" style={{ backgroundColor: '#343964' }}> <Questions /> </div> ) : ( <QuizResults isQuizCompleted={isQuizCompleted} /> )} </> ); }

JonahOP•2mo ago

Thanks for the reply, I try that and it didn't work. It seems that it's not updating in my styles when quiz is completed.

devF•2mo ago

Thanks you for the update! Have you tried the second method?

JonahOP•2mo ago

Yes, I have tried it. Here is a link to my code: https://codesandbox.io/p/sandbox/4n6ksl

caldane•2mo ago

I cannot load that link, it says I do not have access.

JonahOP•2mo ago

Sorry, try this: https://codesandbox.io/p/sandbox/4n6ksl

caldane•2mo ago

You are never passing isQuizCompleted into Main

clevermissfox•2mo ago

If the colour is working but not transparency, try changing ‘transparent’ to something else , like black to see if there’s an ancestor bg that makes it look like it’s not working or to help pinpoint where the discrepancy is coming in

  <div className={`container ${isQuizCompleted ? 'black' : '#343964'}`}>

  <div className={`container ${isQuizCompleted ? 'black' : '#343964'}`}>

caldane•2mo ago

root.render(
  <React.StrictMode>
    <Main />
  </React.StrictMode>
);

root.render(
  <React.StrictMode>
    <Main />
  </React.StrictMode>
);

export default function Main() {
  const [isQuizCompleted, setIsQuizCompleted] = React.useState(false);
  console.log("isQuizCompleted:", isQuizCompleted); // Check the state here

  return (
    <div
      className={`container ${
        isQuizCompleted ? "quiz-completed" : "quiz-in-progress"
      }`}
    >
      {/* Render Questions only if the quiz is not completed */}
      {!isQuizCompleted && <Questions isQuizCompleted={isQuizCompleted} setIsQuizCompleted={setIsQuizCompleted} />}

      {/* Render QuizResults when the quiz is completed */}
      {isQuizCompleted && <QuizResults />}
    </div>
  );
}

export default function Main() {
  const [isQuizCompleted, setIsQuizCompleted] = React.useState(false);
  console.log("isQuizCompleted:", isQuizCompleted); // Check the state here

  return (
    <div
      className={`container ${
        isQuizCompleted ? "quiz-completed" : "quiz-in-progress"
      }`}
    >
      {/* Render Questions only if the quiz is not completed */}
      {!isQuizCompleted && <Questions isQuizCompleted={isQuizCompleted} setIsQuizCompleted={setIsQuizCompleted} />}

      {/* Render QuizResults when the quiz is completed */}
      {isQuizCompleted && <QuizResults />}
    </div>
  );
}

But I am also confused because you are not exporting Questions but rather Quiz from Questions. isQuizCompleted will always be undefined in his example

JonahOP•2mo ago

Thanks for the pointer, I forgot to change it due to renaming the file in the past. It's now

export default function Questions()

export default function Questions()

in the "Questions" component.

caldane•2mo ago

you are still trying to pass isQuizCompleted into main but it looks like it should be a use state var, like in my example above

JonahOP•2mo ago

Oh okay, I will try that. Thanks, it works! And thank you! @clevermissfox @devF

Gaming

Programming

Problem with the container background