React Conditional HTML Parameters

Question

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?

score 1 · Answer 1 · answered Jul 19 '21 at 04:44

1

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

answered Jul 19 '21 at 04:44

Mohit Kushwaha

1,003
1
10
15

Weird i tried that. some reason did not work with the prop. – Harsha M V Jul 19 '21 at 04:59
1

but if it is working with id and name in your code, it should work fine with checked also. – Mohit Kushwaha Jul 19 '21 at 05:07

score 1 · Answer 2 · answered Jul 19 '21 at 05:01

1

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

answered Jul 19 '21 at 05:01

Kavitha K T

119
8

React Conditional HTML Parameters

2 Answers2