React Conditional HTML Parameters

Viewed 53

I am trying to create a component with checked as a prop i can send.

{checked != false ? (
        <input
          id={id}
          name={name}
          type="radio"
          className="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
          checked
        />
      ) : (
        <input
          id={id}
          name={name}
          type="radio"
          className="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
        />
      )}

Is there any way I can simplify it without duplication of code like above?

2 Answers
<input
    id={id}
    name={name}
    type="radio"
    className="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
    checked={checked}
  />
{checked && (
    <input
      id={id}
      name={name}
      type="radio"
      className="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
    />
  ) }
Related