'JSX input field returning attributes with null values

I am trying to hide the placeholder and aria-lablelledby attributes when their value is null. Here is the code:

{this.attachAddons(
          <Input
            key="input"
            aria-describedby={
              HasErrors(validation)
                ? null
                : `error-${fieldName
                    .replace('[', '-')
                    .replace(']', '')}-validation`
            }
            invalid={Validate.isInvalid(state)}
            valid={Validate.isValid(state)}
            value={value}
            disabled={disabled}
            required={required}
            id={id}
            name={fieldName}
            maxLength={props.maxLength}
            placeholder={placeholder}
            aria-labelledby={`${suffix ? `${id}-desc` : ``}`}
            {...rest}
          />,
          inputPrefix,
          inputSuffix,
          inputGroupClassName,
          id,
        )}

Currently the code rendered looks like:

<input id="username" name="username" maxlength="23" placeholder="" aria-labelledby="" type="text"  />

We want it to be:

<input id="username" name="username" maxlength="23" type="text" />


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source