React Unique Index

Info::Reference

Redit: How to use reagent in ClojureScript for Iterating

When we render the game board in React.js it really wants a unique index for every cell in the grid of cells.

Warning in browser

In the Developer console of the browser, you see the following error:

Every element in a sequence should have a unique key

What React.js is looking for

When we render the game board in React.js we use the following generated data structure

([:rect {:width 0.9, :height 0.9, :fill "purple", :x 0, :y 0}]
 [:rect {:width 0.9, :height 0.9, :fill "purple", :x 0, :y 1}]
 [:rect {:width 0.9, :height 0.9, :fill "purple", :x 0, :y 2}]
 [:rect {:width 0.9, :height 0.9, :fill "purple", :x 1, :y 0}]
 [:rect {:width 0.9, :height 0.9, :fill "purple", :x 1, :y 1}]
 [:rect {:width 0.9, :height 0.9, :fill "purple", :x 1, :y 2}]
 [:rect {:width 0.9, :height 0.9, :fill "purple", :x 2, :y 0}]
 [:rect {:width 0.9, :height 0.9, :fill "purple", :x 2, :y 1}]
 [:rect {:width 0.9, :height 0.9, :fill "purple", :x 2, :y 2}])

For the developer we can see that combining the :x and :y co-ordinates would provide an implied index, React.js is looking for something implicit.

Adding Meta data to each cell

To fix this issue, we add a piece of metadata to each cell in the game board by combining the :x and :y co-ordinates into a single value.

^{:key (str x-cell y-cell)}

So when we iterate through the game board using the for function, we generate a unique metadata :key for each cell, ie. 00, 01, 02, etc

(for [x-cell (range (count (:board @app-state)))
      y-cell (range (count (:board @app-state)))]

     ^{:key (str x-cell y-cell)})

     )