Fork me on GitHub
#helix
<
2020-08-24
>
Jaime Sangcap19:08:18

Hi, in react javascript, you can map a list of data to render an array of components

{arrayOfData.map(x => <MyComponent key={x} x={x} />)}
How to do this in helix? In this example, (.ticks x) will return an array of date string
(d/g {:transform (str "translate(" (:left margin) "," (:top margin) ")")}
           (for [val (.ticks x)]
             (d/g {:key val}
                  (d/line
                    (d/text val)))))
But I'm getting error
React child (found: Sat May 01 2021 00:00:00 GMT+0400 (Gulf Standard Time)). If you meant to render a collection of children, use an array instead.

lilactown20:08:44

Is it a date or a string?

lilactown20:08:11

The code looks fine but it looks like react doesn’t like whatever ‘val’ is

Jaime Sangcap20:08:26

Oh sorry, the val is actually a date. (d/text (.toString val)) gives this error though

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

1
Jaime Sangcap20:08:29

Looks like code formatting changes the parenthesis positions. (d/text (.toString val))`` works actually. 😅

1