Getting uncought error: input is a void element tag while using React

Question

How can i fix this error:

input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`

Here is my code snippet:

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <input>Start editing to see some magic happen!</input>
    </div>
  );
}

Youssouf Oumar · Accepted Answer · 2022-08-07 08:41:05Z

3

That's happening because an input should be a single self closed tag. If you want some descriptive text use a label or a placeholder like so :

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <input
        placeholder = "Start editing to see some magic happen!"
      />
    </div>
  );
}

edited Aug 7, 2022 at 8:41

answered Nov 16, 2021 at 6:20

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Getting uncought error: input is a void element tag while using React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related