Warning: Every element in a seq should have a unique :key

[dmcollie]

I'm using version 0.3.0.

I'm getting warnings in the Javascript console like follows:

Warning: Every element in a seq should have a unique :key (in test_taker$account_app$views$signup$signup_form). Value: ([:form {:on-submit #<function (p1__83733_SHARP_){
return p1__83733_SHARP_.preventDefault();
}>, :class nil} ((([:h2 {:class "group-title"} "Your Details"] [:div.form-group {:class " has-error ", :key "form-group-account-name"} ([:label {:for "account-name", :class "control-label ", :key "control-label"} "Name"] ([:input {:key "input-account-name", :type "text", :class "form-control", :id "account-name", :placeholder "Enter your name, e.g. John Appleseed", :on-change #<function (p1__83863_SHARP_){
return reforms.binding.core.reset_BANG_.call(null,cursor,korks,p1__83863_SHARP_.target.value);
}>, :value nil} nil] nil nil [:label {:class "error", :key "erorr-label-account-name"} "You must provide your name"] nil))] [:div.form-group {:class " has-error ", :key "form-group-account-email"} ([:label {:for "account-email", :class "control-label ", :key "control-label"} "Email"] ([:input {:key "input-account-email", :type "email", :class "form-control", :id "account-email", :placeholder "Enter your email address", :on-change #<function (p1__83863_SHARP_){
return reforms.binding.core.reset_BANG_.call(null,cursor,korks,p1__83863_SHARP_.target.value);
}>, :value nil} nil] nil nil [:label {:class "error", :key "erorr-label-account-email"} "You must provide your email address"] nil))] [:div.form-group {:class "  ", :key "form-group-account-email-check"} ([:label {:for "account-email-check", :class "control-label ", :key "control-label"} "Confirm Email"] ([:input {:key "input-account-email-check", :type "email", :class "form-control", :id "account-email-check", :placeholder "Enter the same email again", :on-change #<function (p1__83863_SHARP_){
return reforms.binding.core.reset_BANG_.call(null,cursor,korks,p1__83863_SHARP_.target.value);
}>, :value nil} nil] nil nil nil nil))] [:div.form-group {:class " has-error ", :key "form-group-account-password"} ([:label {:for "account-password", :class "control-label ", :key "control-label"} "Password"] ([:input {:key "input-account-password", :type "password", :class "form-control", :id "account-password", :placeholder "Enter a password", :on-change #<function (p1__83863_SHARP_){
return reforms.binding.core.reset_BANG_.call(null,cursor,korks,p1__83863_SHARP_.target.value);
}>, :value nil} nil] nil nil [:label {:class "error", :key "erorr-label-account-password"} "You must provide a password"] nil))] [:div.form-group {:class "  ", :key "form-group-account-password-check"} ([:label {:for "account-password-check", :class "control-label ", :key "control-label"} "Confirm Password"] ([:input {:key "input-account-password-check", :type "password", :class "form-control", :id "account-password-check", :placeholder "Enter the same password again", :on-change #<function (p1__83863_SHARP_){
return reforms.binding.core.reset_BANG_.call(null,cursor,korks,p1__83863_SHARP_.target.value);
}>, :value nil} nil] nil nil nil nil))] [:div.form-group {:key "form-group-form-buttons"} (nil ([:button {:disabled nil, :on-click #<function (){
if(cljs.core.truth_(disabled)){
return null;
} else {
return on_click.call(null);
}
}>, :key "next-btn-primary-btn", :class "btn-primary btn", :type "button"} "Next" nil]))]))) nil])

The code that produces these warnings follows:

(defmethod render-stage ::account-input [form-data]
  (v/form form-data
    (f/group-title "Your Details")
    (v/text "Name" "Enter your name, e.g. John Appleseed" form-data [:account :name])
    (v/email "Email" "Enter your email address" form-data [:account :email])
    (v/email "Confirm Email" "Enter the same email again" form-data [:account :email-check])
    (v/password "Password" "Enter a password" form-data [:account :password])
    (v/password "Confirm Password" "Enter the same password again" form-data [:account :password-check])
    (f/form-buttons
      (f/button-primary "Next" #(when (v/validate! form-data form-data
                                        (v/present [:account :name] "You must provide your name")
                                        (v/present [:account :email] "You must provide your email address")
                                        (v/present [:account :password] "You must provide a password")
                                        (v/equal [:account :email] [:account :email-check] "Emails must match")
                                        (v/equal [:account :password] [:account :password-check] "Passwords must match"))
                                     (swap! form-data assoc :stage ::candidate-input))))))

How can I fix this?

[bilus]

Although this is proves to be pretty harmless in the actual production code we use reforms in, the warnings are, indeed, irritating. The problem with the above code seems that group-title misses a :key. I'll comb through the code again before releasing 0.4.0 and will do my best to add missing keys.

For now, you should be able to add a unique key to group-title (and any other node that misses it), e.g.:

(f/group-title {:key "gt-your-details"} "Your details")

As a rule, every helper accepts an optional attribute hash as the first argument, letting you specify stuff such as additional CSS classes, React key and other element-specific attributes.

[dmcollie]

That's fixed the issue - many thanks.