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 - developer.mozilla.org/en-US/docs/Learn/HTML/Forms/… — Kunukn
– Kunukn, Commented Feb 26, 2018 at 22:03
@hamed-minaee, Have you look at the following link: stackoverflow.com/questions/22752116/react-label-element — salman.zare
– salman.zare, Commented Feb 26, 2018 at 22:05
@salman.zare Yes but in that the label will be outside of the input — Hamed Minaee
– Hamed Minaee, Commented Feb 26, 2018 at 22:06

Mohhamad Hasham · Accepted Answer · 2018-02-26 22:04:17Z

1

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>
    )

answered Feb 26, 2018 at 22:04

Mohhamad Hasham

2,0721 gold badge17 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

Cannot add link and label inside an input element in reactjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related