Как добавить динамические свойства в элемент ввода на основе условия?

Question

Ниже приведены фрагменты двух входных элементов, которые будут загружены в зависимости от условия? Существует одно имя реквизита, и в зависимости от значения реквизита оно будет загружать входные данные.

Здесь, если имя содержит некоторое значение, оно будет загружать первый вход со свойством maxlength = "10" и остальные свойства останутся такими же.

Вот мой вопрос, как оптимизировать код, чтобы он удалил один элемент ввода, я хочу только один элемент ввода.

Любая помощь будетбыть великим

const name = {this.props}
{ name === "xyz" ?

<input
	  type={type || 'text'}
	  name={name}
	  onBlur={onBlur}
	  onChange={onChange}
	  onDragStart={onDragStart}
	  onDrop={onDrop}
	  onFocus={onFocus}
	  maxlength="10"
	  value={value}
	  disabled={disabled}
	  className={[className, disabled ? 'disabled' : ''].join(' ')}
	  placeholder={placeholder}
	  min={min}
	/>
:

<input
	  type={type || 'text'}
	  name={name}
	  onBlur={onBlur}
	  onChange={onChange}
	  onDragStart={onDragStart}
	  onDrop={onDrop}
	  onFocus={onFocus}
	  value={value}
	  disabled={disabled}
	  className={[className, disabled ? 'disabled' : ''].join(' ')}
	  placeholder={placeholder}
	  min={min}
	/>

Answer 1

Это будет работать

const name = {this.props}
<input
	  type={type || 'text'}
	  name={name}
	  onBlur={onBlur}
	  onChange={onChange}
	  onDragStart={onDragStart}
	  onDrop={onDrop}
	  onFocus={onFocus}
	  {...name==='xyz' && {maxlength:"10"}}
	  value={value}
	  disabled={disabled}
	  className={[className, disabled ? 'disabled' : ''].join(' ')}
	  placeholder={placeholder}
	  min={min}
	/>

Answer 2

Попробуйте:

...

function App() {
  const name = "abc";
  ...

  const attribs = {
    type: type || "text",
    name: name,
    ...
    className: [className, disabled ? "disabled" : ""].join(" "),
    ...
  };

  if (name === "xyz") {
    attribs["maxLength"] = "10";
  }

  return (
    <div>
      <input {...attribs} />
    </div>
  );
}

render(<App />, document.getElementById("root"));