EarthCubeGeochron / sparrow-uw-cosmo

Sparrow implementation for the UW Madison Cosmogenic Nuclides Lab
https://sparrow-cosmo.geoscience.wisc.edu/
0 stars 0 forks source link

Exporting addMarker as a class #8

Open yeshancqcq opened 4 years ago

yeshancqcq commented 4 years ago

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: image

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 commented 4 years ago

@davenquinn

davenquinn commented 4 years ago

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