Exporting addMarker as a class

[yeshancqcq]

In mapping.js: lines 26 - 49 are defining the addMarker function as a class; It is exported at line 113.

In form.js: Trying to log the exported class at line 78.

Got a rendering issue:

If the addMarker is put within the Carto class as a function, it can be exported and received by form.js, but the coordinate cannot be separated from the exported function.

[yeshancqcq]

@davenquinn

[davenquinn]

You're on a good track, but this is a clear example of needing to align your code with the conceptual model expected by React.

First, the addMarkerClass class is not actually a react component because it doesn't have a "render" method. Second, the way you are trying to pass the "addMarker" function up from a child component to a parent component doesn't really work in React. This is a common pitfall with the library, which expects and rigorously enforces a "one-way data flow". Basically, you are forced into a single design pattern that works here.

You should create the marker state in the form component, and pass both the relevant state and a setter function to change it down to the child "Carto" component. Then, the API of your component will look somewhat like one of the other blueprint components you use in your forms.

To build a better conceptual understanding of what works here, I'd read the docs at https://reactjs.org/docs/lifting-state-up.html and also the more general guide at https://reactjs.org/docs/thinking-in-react.html