There are three radio buttons that correspond to school, restaurant, and store. Clicking on each button should display nearby locations of the selected type. Displaying Google Map and nearby places individually works fine without any issues.
class PropertyMap extends React.Component{
constructor(props) {
super(props);
this.state = {
propertyType: 'default',
selectedOption: ''
}
this.handleClick = this.handleClick.bind(this);
}
handleClick(e){
this.setState({
propertyType: e.target.value
});
}
componentDidMount(){
let school = document.getElementById('school');
let restaurant = document.getElementById('restaurant');
let default = document.getElementById('default');
if(this.state.propertyType == 'restaurant'){
school.setAttribute('style', 'height:0');
restaurant.setAttribute('style', 'height:100%');
}
else if(this.state.propertyType == 'school'){
school.setAttribute('style', 'height:100%');
restaurant.setAttribute('style', 'height:0');
}
else{
school.setAttribute('style', 'height:0%');
restaurant.setAttribute('style', 'height:0');
default.setAttribute('style', 'height:100%');
}
}
render(){
let _standard = this.props.standard;
let datax = _standard.data;
let address = datax.address;
let city = datax.City;
let postcode = datax.Code;
let st = datax.State;
let defaultMap = (<DefaultMap mapdetails={datax} />);
let schoolMap = (<SchoolMap mapdetails={datax} type={this.state.propertyType} />);
let restaurantMap = (<RestaurantMap mapdetails={datax} type={this.state.propertyType} />);
return(
<div>
<div className="container">
<div className="row">
<div className="col-md-12">
<div className="location-info-container">
<h2>Location</h2>
<p>
{address}.
</p>
<p>
{city}, {st} {postcode}
</p>
<p><b>Nearby:</b></p>
<label className="radio-inline">
<input type="radio" name="map" id="" onChange={this.handleClick} value="school" /> School
</label>
<label className="radio-inline">
<input type="radio" name="map" id="" onChange={this.handleClick} value="restaurant" /> Restaurant
</label>
<label className="radio-inline">
<input type="radio" name="map" id="" onChange={this.handleClick} value="store" /> Store
</label>
</div>
</div>
</div>
</div>
<div id="gmap">
<div id="default">
{defaultMap}
</div>
<div id="restaurant">
{restaurantMap}
</div>
<div id="school">
{schoolMap}
</div>
</div>
</div>
)
}
}
I'm facing an issue where the styles defined in my componentDidMount() function are not updating after clicking on the radio buttons. I want the height of the selected option (school or restaurant) to be 100% while the other should have a height of 0% when clicked. Any suggestions on why this functionality is not working?