I have written a reusable input type UI ponent in react where the name, description etc has be changed dynamically according to the place it is used

const InputType = props => {

  const { inputName, inputTypes, descriptionInput, onChangHandler, onBlurHandler, iconName } = props;

  return (
    <div className="a-input a-input--large">
      <label>{inputName}</label>
      <div className="m-input-tip ">
        <input type={inputTypes} onChange={onChangHandler} onBlur={onBlurHandler}>
          <div className="a-tip">
            {
              isNotNullOrDefined(iconName, true) &&
              <Icon />
            }
            <Icon className="a-icons--small" name={iconName} />
            <span>{descriptionInput}</span>
          </div>
        </input>
      </div>
      <div className="validation">This is a required field</div>
    </div>

  );

}

but when i try to simply execute it like so,

return (
  <InputType
    inputName="Type what you want to search"
    inputTypes="text"
  />
);

I get a an error like this in the console

Uncaught Invariant Violation: input is a void element tag and must neither have children nor use dangerouslySetInnerHTML.

The above error occurred in the ponent

I have written a reusable input type UI ponent in react where the name, description etc has be changed dynamically according to the place it is used

const InputType = props => {

  const { inputName, inputTypes, descriptionInput, onChangHandler, onBlurHandler, iconName } = props;

  return (
    <div className="a-input a-input--large">
      <label>{inputName}</label>
      <div className="m-input-tip ">
        <input type={inputTypes} onChange={onChangHandler} onBlur={onBlurHandler}>
          <div className="a-tip">
            {
              isNotNullOrDefined(iconName, true) &&
              <Icon />
            }
            <Icon className="a-icons--small" name={iconName} />
            <span>{descriptionInput}</span>
          </div>
        </input>
      </div>
      <div className="validation">This is a required field</div>
    </div>

  );

}

but when i try to simply execute it like so,

return (
  <InputType
    inputName="Type what you want to search"
    inputTypes="text"
  />
);

I get a an error like this in the console

Uncaught Invariant Violation: input is a void element tag and must neither have children nor use dangerouslySetInnerHTML.

The above error occurred in the ponent

• javascript
• html
• reactjs
• input

• 1 You cannot add a div inside input tag.. Input tag needs to be a self closing tag.. So use it like <input type={inputTypes} onChange={onChangHandler} onBlur={onBlurHandler} /> .. And remove closing input tag </input> .. Ref: stackoverflow./a/36527825/7785337 – Maniraj Murugan Commented Jul 3, 2020 at 8:29

2 Answers 2

You have a mistake in html: input is self-closing tag and cannot have children like you do

<input type={inputTypes} onChange={onChangHandler} onBlur={onBlurHandler}>
  {/* this is a mistake */}
  <div className="a-tip">
    {isNotNullOrDefined(iconName, true) && <Icon />}
    <Icon className="a-icons--small" name={iconName} />
    <span>{descriptionInput}</span>
  </div>
</input>;

Input must be self-closing.

<input type={inputTypes} onChange={onChangHandler} onBlur={onBlurHandler} />

Here is docs link

This rule applies when void elements have either children or dangerouslySetInnerHTML prop.

HTML elements such as <area />, <br />, and <input /> are void elements which are only self-closing without any content.

Therefore, React will throw an exception if you set either children or dangerouslySetInnerHTML prop for a void element.