Each child in a list should have a unique "key" prop. in react

Question

I have a Child component like below

import React, { Component } from 'react';

class InputText extends Component  {
  render = () => {    
    return (
      <div className="form-group">
        <label htmlFor={this.props.id}>{this.props.label}</label>
        <input type={this.props.type} value={this.props.value} placeholder={this.props.placeholder} name={this.props.name} id={this.props.id} className= {"form-control "+ this.props.class} required={this.props.extraValue}/>
      </div>
    )
  }
}

export default InputText

I am calling this in Parent component like below

<InputText class="" placeholder="Email here..." type="email" name="email" onChange={this.handleChange} extraValue={true} label={[<span className="text-danger">*</span>, " Email"]} />

I am getting error like below

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `InputText`. It was passed a child from Register. See https://fb.me for more information.
    in span (at Register.js:182)
    in InputText (at Register.js:182)

Does this answer your question? [Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of \`ListView\`](https://stackoverflow.com/questions/34576332/warning-each-child-in-an-array-or-iterator-should-have-a-unique-key-prop-che) — norbitrial, Dec 05 '19 at 16:05
Thanks @norbitrial. I have no array. So how is it possible to generate unique ID ? — abu abu, Dec 05 '19 at 16:11
You are passing in an array for the label value. Could it be that tripping the error? — Chris Adams, Dec 05 '19 at 16:17

kind user · Accepted Answer · 2019-12-05T16:16:01.083

2

Every JSX element passed as an array has to have an unique id. Simply assign some key to the span element.

label={[<span key={1} className="text-danger">*</span>, " Email"]}
            // ^^^^ key

However I would suggest you to just pass it as two separate props, instead of passing down as an array.

label={'*'}
text={'Email'}

and inside your component:

<label htmlFor={this.props.id}>
   <span className='text-danger'>{this.props.label}</span>
   {this.props.text}
</label>

edited Dec 05 '19 at 16:16

answered Dec 05 '19 at 16:05

kind user

40,029
7
67
77

Thanks @kind user. I have no array. So how is it possible to generate unique ID ? – abu abu Dec 05 '19 at 16:11
2

@abuabu Actually you have an array - you are passing down two nodes inside an array. – kind user Dec 05 '19 at 16:13

Each child in a list should have a unique "key" prop. in react

1 Answers1