I am using leaflet in my react code and I am not using react-leaflet. I want to pass a react component or jsx code to binbPopup function to every tooltip.
let marker = new L.marker(...).bindPopup(<div>Hi</div>)
bindPopup gets string as a input so I cannot use jsx. I also tried to use react portals but still it doesn't work.
What is the solution for this problem?
You can use renderToString method of ReactDOMServer to convert React component to markup string.
import React, { Component } from "react";
import ReactDOM from "react-dom";
import ReactDOMServer from "react-dom/server";
import * as L from "leaflet";
import "./styles.css";
const CustomReactPopup = () => {
return (
<div style={{ fontSize: "24px", color: "black" }}>
<p>A pretty React Popup</p>
</div>
);
};
class App extends Component {
componentDidMount() {
var map = L.map("map").setView([51.505, -0.09], 13);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'© OpenStreetMap contributors'
}).addTo(map);
L.marker([51.5, -0.09])
.addTo(map)
.bindPopup(ReactDOMServer.renderToString(<CustomReactPopup />))
.openPopup();
}
render() {
return (
<div>
<div id="map" />
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Working example here: https://codesandbox.io/s/leaflet-with-react-znk11
Related
I'm building a React-Django application, and on my App component, I'm getting an issue on the final line with my render(<App />, appDiv).
Please can someone tell me what I'm doing wrong? I have the necessary modules imported, and this worked on my previous project. I am aware that Function-based components are better, but I'm more experienced with Class-based.
Error:
Code:
import React, { Component } from "react";
import { render } from "react-dom";
import HomePage from "./HomePage";
export default class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="center">
<HomePage />
</div>
);
}
}
const appDiv = document.getElementById("app");
render(<App />, appDiv);
Thanks,
DillonB07
TypeError expanded:
Try to replace:
import { render } from "react-dom";
with
import ReactDOM from "react-dom";
And use ReactDOM.render instead of just render
I have SVG files written in Function Components.
import React from "react";
const MySVGBackground= (props) => {
return (
<svg> some svg here</svg>
);
};
export default MySVGBackground;
I need to render this as a background:
<div style={{ backgroundImage: `url(${MySVGBackground})` }}> </div>
but it's not working.
I can't purely import the SVG directly, because it gives me an error of Unexpected Token. So I have to wrap the SVG into the FC and export it.
Here is the sample code:
https://codesandbox.io/s/react-background-issue-9wt4x?file=/src/App.js
Try this:
https://codesandbox.io/s/react-background-issue-ut933
import React from "react";
import "./styles.css";
import BackgroundSVG from "./backgroundSVG";
// import this to render static markup
import { renderToStaticMarkup } from 'react-dom/server';
export default function App() {
// convert component to string useable in data-uri
const svgString = encodeURIComponent(renderToStaticMarkup(<BackgroundSVG />));
return (
<div className="App">
<h2
style={{
backgroundImage: `url("data:image/svg+xml,${svgString}")`
}}
>
Svg background
</h2>
</div>
);
}
The data: image/svg+xml;utf8 part tells the browser that raw image data is following.
More information can be found here:
https://css-tricks.com/lodge/svg/09-svg-data-uris/
https://gist.github.com/iansinnott/2e8fe9d9e4c6c7c55793d38f81c999a3
I'm using React, Material UI with JSS and React Router.
I'm hooking in to <NavLink> to apply an active class like:
<NavLink to={'/dashboard'} activeClassName={classes.active}
<button className={classes.btn}>Link</button>
/>
The class is being added fine to the parent, but I'm having an issue applying the style to the child button if it's a class. When targeting the element it works, just not the class.
I've looked into using nested JSS, but this still does not work. Any ideas?
active: {
'& .btn': { // This doesn't work
backgroundColor: '#2A354F'
},
'& button': { // This works
backgroundColor: '#2A354F'
}
}
If btn is another class defined via JSS, then you need to refer to it using $btn.
See this part of the JSS documentation.
Here's some sample code that works:
import React from "react";
import ReactDOM from "react-dom";
import { NavLink, BrowserRouter } from "react-router-dom";
import { withStyles } from "#material-ui/core/styles";
const styles = {
btn: {},
active: {
"& $btn": {
backgroundColor: "#2A354F",
color: "#fff"
}
}
};
function App(props) {
return (
<BrowserRouter>
<div className="App">
<NavLink to="/" activeClassName={props.classes.active}>
<button className={props.classes.btn}>Link</button>
</NavLink>
</div>
</BrowserRouter>
);
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);
It does not work due to class name ".btn" because the root class "active" after rendering of React will not have the same class name and it cannot found out it.
just set {classes.btn}
<button className={classes.btn}>Link</button>
React project can't detect any change in app.js file
This is my app.js file:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<h1>I'm a react app!</h1>
</div>
);
}
}
export default App;
This is the result
Try putting the text I'm a react app! inside a div.
class App extends Component {
render() {
return (
<div>I'm a react app!</div>
);
}
} export default App;
You probably need to use ReactDOM to help tell app where to render your component. For instance, if you create a div in your HTML like <div id="root"></div>, then you could use the following code:
import React, {
Component
} from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return (
<div>I'm a react app!</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Also note that when you return your render, the result should be wrapped in a single tag.
I am new to ReactJS, but familiar with React Native. I am trying to to get a basic map component to be displayed.
My map component is
WaterMapView.js
import React, { Component } from 'react';
import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
export class WaterMapView extends Component {
render () {
console.log(' I am here ');
return (
<Map
google={this.props.google}
style={styles.mapStyle}
initialCenter={{
lat: 40.854885,
lng: -88.081807
}}
zoom={15}
/>
)
}
}
const styles = {
mapStyle: {
height: '100%',
width: '100%'
}
}
export default GoogleApiWrapper({
apiKey: 'AIxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
})(WaterMapView)
This component is embedded in MainDashboard.js as follows :
import React, { Component } from 'react';
import windowSize from 'react-window-size';
import WaterMapView from './WaterMapView';
class MainDashboard extends Component {
render () {
const height = this.props.windowHeight;
const {
containerStyle,
headerStyle,
navigationStyle,
mainPageStyle,
eventPageStyle,
mapPageStyle,
mapDisplayStyle,
mapPropertiesStyle
} = styles;
return (
<div style={{ ...containerStyle, height }} >
<div style={headerStyle} >
</div>
<div style={navigationStyle} >
</div>
<div style={mainPageStyle} >
<div style={eventPageStyle} >
</div>
<div style={mapPageStyle} >
<div style={mapDisplayStyle} >
<WaterMapView />
</div>
<div style={mapPropertiesStyle} >
</div>
</div>
</div>
</div>
);
};
};
My App.js component is :
import React from 'react';
import MainDashboard from './MainDashboard';
const App = () => {
return (
<div>
<MainDashboard />
</div>
)
};
export default App
And index.js is :
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './Components/App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
I am using React version 16.0.0 and google-maps-react version 1.1.0
I get an error accompanied by a dump of code. The error is :
TypeError: Cannot read property 'array' of undefined
I am not including the dump in this post. I can add that if required.
The problem seems very basic as the I do not even see the console.log statement 'I am here' in WaterMapView.js component.
Let me know what am I missing.
<div style={mapDisplayStyle} >
WaterMapView
</div>
Should be
<div style={mapDisplayStyle} >
<WaterMapView />
</div>
Otherwise react just interprets WaterMapView as a string and displays the string. When you want to use/render the component you need to add < > to id.