How to place a rendered element in a div in ReactJs - reactjs

Question

I'm new in ReactJs and I only know a few things as of now. I'm trying to create this Google map with directions which is successful
MapRender.js
import React from 'react';
import { render } from 'react-dom';
import Map from './mapProps';
//import './style.css';
const googleMapsApiKey = "API_KEY";
export default function FinalMap() {
const FinalMap = props => {
const {places} = props;
const {
loadingElement,
containerElement,
mapElement,
defaultCenter,
defaultZoom
} = props;
return (
<Map
googleMapURL={
'https://maps.googleapis.com/maps/api/js?key=' +
googleMapsApiKey +
'&libraries=geometry,drawing,places'
}
markers={places}
loadingElement={loadingElement || <div style={{height: `100%`}}/>}
containerElement={containerElement || <div style={{height: "80vh"}}/>}
mapElement={mapElement || <div style={{height: `100%`}}/>}
defaultCenter={defaultCenter || {lat: 25.798939, lng: -80.291409}}
defaultZoom={defaultZoom || 13}
/>
);
};
const places = [
{latitude:14.7539407,longitude:121.0338431},
{latitude: 14.625981794368357,longitude: 121.06170033978614},
]
render(<FinalMap defaultZoom={12} places={places} />, document.getElementById('root'));
}
And this is my App.js
import React from 'react';
import picture1 from '../../src/picture1.jpg';
import RechartBar from '../postlist/Rechart-Bar';
import RechartLine from '../postlist/Rechart-Line';
import driverstat from '../driverprofiles/driverstat';
import AppMap from './Maps/map';
import MapRender from './Maps/MapRender';
function Home() {
return (
<div className="Bodydiv">
<div className="homediv">
<div className="userdiv">
<div className="userdiv-profile">
<div className="userdiv-profile-photo">
<img src={picture1} className="photo" alt="picture1"></img>
</div>
<div className="userdiv-profile-name">
</div>
<div className="userdiv-profile-name">
Name:
</div>
<div className="userdiv-profile-name">
Driver ID:
</div>
<div className="userdiv-profile-name">
Plate Number:
</div>
<div className="userdiv-profile-name">
Status:
</div>
</div>
<div className="userdiv-stats">
Statistics
{driverstat.map((item, index) => {
return (
<li key={index} className={item.cName}>
{item.icon}
</li>
);
})}
<h4 class="view-history">View History</h4>
<input type="button" className="backtodrivers-btn" alt="back" value="Back"/>
</div>
</div>
<div className='mapdiv'>
<MapRender/>
</div>
</div>
<RechartBar/>
<RechartLine/>
</div>
);
}
export default Home;
The problem is It does run but it made my other elements go away because the map was rendered as seen in the last part of my MapRender.js, what I wanted to do is place this in a component and then call that component in my App.js (Similar to what I have done in RechartBar and RechartLine at the end of my App.js.
Thanks

Answer 1

You are replacing entire app with FinalMap component using this line.
Remove this line from MapRenderer.js
render(<FinalMap defaultZoom={12} places={places} />, document.getElementById('root'));
import React from 'react';
import { render } from 'react-dom';
import Map from './mapProps';
//import './style.css';
const googleMapsApiKey = "API_KEY";
export default function FinalMap(props) {
const {
places,
loadingElement,
containerElement,
mapElement,
defaultCenter,
defaultZoom
} = props;
return (
<Map
googleMapURL={
'https://maps.googleapis.com/maps/api/js?key=' +
googleMapsApiKey +
'&libraries=geometry,drawing,places'
}
markers={places}
loadingElement={loadingElement || <div style={{height: `100%`}}/>}
containerElement={containerElement || <div style={{height: "80vh"}}/>}
mapElement={mapElement || <div style={{height: `100%`}}/>}
defaultCenter={defaultCenter || {lat: 25.798939, lng: -80.291409}}
defaultZoom={defaultZoom || 13}
/>
);
};
Then in App.js
import React from 'react';
import picture1 from '../../src/picture1.jpg';
import RechartBar from '../postlist/Rechart-Bar';
import RechartLine from '../postlist/Rechart-Line';
import driverstat from '../driverprofiles/driverstat';
import AppMap from './Maps/map';
import MapRender from './Maps/MapRender';
function Home() {
return (
<div className="Bodydiv">
<div className="homediv">
<div className="userdiv">
<div className="userdiv-profile">
<div className="userdiv-profile-photo">
<img src={picture1} className="photo" alt="picture1"></img>
</div>
<div className="userdiv-profile-name">
</div>
<div className="userdiv-profile-name">
Name:
</div>
<div className="userdiv-profile-name">
Driver ID:
</div>
<div className="userdiv-profile-name">
Plate Number:
</div>
<div className="userdiv-profile-name">
Status:
</div>
</div>
<div className="userdiv-stats">
Statistics
{driverstat.map((item, index) => {
return (
<li key={index} className={item.cName}>
{item.icon}
</li>
);
})}
<h4 class="view-history">View History</h4>
<input type="button" className="backtodrivers-btn" alt="back" value="Back"/>
</div>
</div>
<div className='mapdiv'>
<MapRender places={[
{latitude:14.7539407,longitude:121.0338431},
{latitude: 14.625981794368357,longitude: 121.06170033978614},
]}/>
</div>
</div>
<RechartBar/>
<RechartLine/>
</div>
);
}
export default Home;