Create a Grid UI that can capture clicks

App Building
,
21

This looks pretty spiffy. I'll be diving into this example either today or starting next week.
Thanks!

22

Ok so I put my default map data in your model and that works pretty great.
Next i added a second array to the model.
{
gridData: {{exampleData.data}},
placedItems: {{getXYItem.data}}
}

Then I added a line for how i assumed this would work (I am wrong and need help on this)

{row.map((node, x) => (
<div
key={x}
className="map_square"
type={node[0]}
contenttype={model.placedItems[y][x].contenttype}
onClick={() =>
modelUpdate({
clickedSquare: { x, y }
})
}
/>
))}

For reference this is what placed items is.

{getitems.map( items => (
  content[items.y][items.x] = {"ID": items.objectID, "contenttype": items.contenttype}
))};

This returns an object that looks correct on inspection. Most values in this 100x100 array are empty, but there are some populated with the data i expect.
image

So how do i add that property to the div? Also, i would want to add the contenttype property to the onclick function too so i can access it in the node query you created in your example.

23

What are you seeing returned by the custom component when you add that code?

My first guess is to say that, since model.placedItems[y][x] might not always be defined you're likely to run into any error when you try and access the contenttype property on it. If that's the case I'd expect there'd be something like the following error in your debug tools:

And you might be able to fix it using optional chaining:

contenttype={model.placedItems[y]?.[x]?.contenttype}

It could be a separate issue though... :thinking:

24

So in the editor I don't see any error on the console. But in the browser based console i see this error. What is displayed is just an empty shell of a component.

image

BTW optional chaining is clearing other errors with nulls elsewhere in my apps, so Thanks very much for showing me that.

I also tried declaring explicitly those properties as "" instead of null in the array of objects. Still no dice.

25

Ok so after the retool community office hours we arrived at a solution.

<script>
  function getContentType(model, x ,y ){
    return model.placedItems?.[y]?.[x]?.contenttype;
  }
</script>

Place this above the babel script. This allows the chaining function mentioned above.

then I can just refer to the function
contenttype={getContentType(model, x, y)}

This got me where i needed to go. Thanks so much @Kabirdas

1 Like