Cannot add link and label inside an input element in reactjs

Question

I need to add a link and label inside an input element in reactjs component. The follwoing is what I have:

render() {
  return(
    <div className="login-panel-page">
      <input type="password" id="password"
             name="password" value="" placeholder="Password" maxLength="255" autoCapitalize="off">
        <label htmlFor="password">Password</label>
        <a>Show password</a>
      </input>
    </div>
  )
}

However here is what I get:

bundle.js:9179 Uncaught 
Error: input is a void element tag 
and must neitherhave `children` nor use `dangerouslySetInnerHTML`. 
Check the render method of Login.

Can anyone help how I can achieve that?

React is helping you avoiding writing invalid markup. `Input` tag can't have children. Here's a guide how to use input and label - https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form — Kunukn, Feb 26 '18 at 22:03
@hamed-minaee, Have you look at the following link: https://stackoverflow.com/questions/22752116/react-label-element — salman.zare, Feb 26 '18 at 22:05
@salman.zare Yes but in that the label will be outside of the input — Hamed Minaee, Feb 26 '18 at 22:06

score 1 · Accepted Answer · answered Feb 26 '18 at 22:04

Input can't have children, you can do something like this

Reference : https://github.com/facebook/react/issues/6241

 render() {
    return (
    <div className="login-panel-page">
                    <input type="password" id="password" name="password" value="" placeholder="Password" maxLength="255" autoCapitalize="off"/>
                    <label htmlFor="password">Password</label>
                    <a href="#">Show password</a>

    </div>
    )

Cannot add link and label inside an input element in reactjs

1 Answers1