Junior dev here!
Building a project with React (ts) and Mapbox.
I'm trying to render a marker popup with data from my own API with .setPopup() from the mapbox api.
Since I could not find a way to render a react component when clicking on a marker I use the .setHTML() from the mapbox api.
It worked fine until it was time to render arrays (one array with objects and one with strings).
I've tried mapping it out as I would in a tsx component and with pure ts + querySelectors and so on.
Either I get [Object, Object ] or nothing.
Anyone got any ideas? #desperate
Related
I'm working with a Chrome extension and embedding UI component on a user's site.
I wrote React component with Typescript (.tsx files)
The thing is, when I'm trying to embed the react component inside the site, the component just wont function - drop-downs wont open, buttons click wont do anything, components wont re-render on state change, etc... sometimes the components even lose all of it styles, like the css doesn't exist.
The only thing I could notice is that I'm embedding the components inside an iframe, idk if it has something to do with that or not - but if i put them outside the iframe - all works perfectly.
Im using render function to render the component on the site:
const element = ReactDOM.createRoot(#selector to create root#);
element.render(<MyComponent prop1="prop1" prop2="prop2"></MyComponent>);
Anyone had any experience with the type of issue?
Thanks!
As I mentioned - I already tried to embed the component outside an iframe and it worked
I'm trying to replicate this example with NextJS.
The component gets rendered, but the content doesn't. Is SSR simply a limitation for this particular example?
As the title, I would like to find out the way to print values of "this.props" of a Component in React.
In a normal way, we can put console.log() in code or use React Developer Tools by click on "React" tab after open "F12 on browser" and use "$r" on "Console" tab to print "props". But, how could I print "this.props" without React Developer Tools or console.log() in code? Is there any global default variable that contains props of React? I have tried to use $('classID').... to find out props but it also only appear React value after I click on React Developer Tools.
add
console.log(this.props)
before you return JSX
I’m new to React Native, but what I’m trying to do is port over my react app that centers around maps. Usually in react I can load Geojson files directly to data layer of Google Maps, but how do I go about doing this in react-native-maps? Also anytime the Geojson is loaded in react I can attach an event listener to trigger something when you click on that area, how is that accomplished in RN. (React code below)
I've tried working with (Polygon) but the format with the coordinates in Geojson doesn't play well with each other.
map.data.addGeoJson(localGeoJsonFile.json);
map.data.addListener(‘click’, function(event) {
getInfo = event.feature.getProperty(‘city_name’);
});
First of all, have a look at https://github.com/frankrowe/react-native-geojson, it allows you to load GeoJSON data into a MapView element from react-native-maps.
Concerning click events, although the element supports onPress property, currently react-native-geojson doesn't propagate such properties to the calculated Polygon from GeoJSON.
A first attempt to support onPress on every feature is made in this fork https://github.com/Appcademy/react-native-geojson
I am very new to react.js, I want to use react js to prepare a line chart without using other js file.
Is it possible to create one with only react.js?
Examples shown in the internet has D3 components, chart.js and so on. I am not sure if these are sub products of react.js. I would want to avoid other js files as much as possible and go with react.js only.
D3 and such have nothing to do with React. D3 can be used with it, although not completely (no animations, for instance) because in React you cannot mutate the DOM without changing a prop or a state. If something changes in your page without React knowing it, you will get an error looking like "Invariant violation: DOM mutated unexpectedly". The way you would work with D3 in React is to consider SVG elements as components just like all others you use in your app.
You don't need any D3 to do that actually: just use SVG elements such as <svg>, <line>, etc. as if they were usual components, to draw whatever you want in a div. Refer to the SVG docs.
For a line chart it is definitely doable. If you want a complex graph - or a pretty one - then why not use an external library ? The weight of the js file you import can end up comparing with the weight of your own js code, except there will be a thousand times less bugs.