I am having problems using ternary operators with typescript

Question

I am having problems using ternary operators with typescript, please check the code to understand what I am trying to say.

  ` 
    const QuizQuestionContainer = ({ qa }: QuizQuestionContainerPropsType) => {
      const { question, option1, option2, option3, option4 ,checked } = qa;
     return (
        <>
          <h4>{question}</h4>
          <form>
            <input
              type="radio"
              value={option1}
              name="option"
              onClick={checkOption}
              {checked === option1 ? "defaultChecked": ""}
              
            />
      );
    };
    
    export default QuizQuestionContainer;
  `  
     

I am receiving a props "qa" and I destructured the value "checked" from it and I want the input to be checked by default if the "checked" is equal to the option but it is throwing an error saying "'...' expected.ts(1005)" and "Spread types may only be created from object types.ts(2698)"

Answer 1

You need to define what prop name you're providing a value for!

{checked === option1? "defaultChecked": ""} is a valid boolean value, but you need to assign it to an input prop. Maybe you're looking to do checked={option1 === "defaultChecked"} ?

This could be a result of the checked variable having the same name as that input prop -- might be helpful to rename the variable to isChecked to avoid confusion in the future.

Answer 2

I believe what you want to do here is determine if the input is checked checked accepts a boolean (true = checked)

changed to this: checked={checked === option1}

Answer 3

If you want to set the prop defaultCheck using the condition you mentioned, change to:

defaultChecked={checked === option1}