Reputation: 259
I have three radio buttons which chooses school, restaurant and store. When clicking each, I would like to display the following nearby place whether it is school, restaurant or store. I have no problem on displaying the google map and its nearby places if I do it individually.
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>
)
}
}
Can anyone advise why the styles from my componentDidMount are not updating when I click any of the radio buttons? Basically, if I click school I want its height
to be equal to 100%
and the restaurant to be 0
and vice-versa.
Upvotes: 0
Views: 466
Reputation: 1727
Like I said in a comment before, componentDidMount only executes the first time when component is mounted. You can use componentWillUpdate or componentDidUpdate if you need to do something before and/or after a component update. See: https://facebook.github.io/react/docs/react-component.html
If you just want to show or hide a component with a radio button action, best practice in React could be something like this:
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
});
}
render() {
let map = <div>Your Default component here</div>;
switch (this.state.propertyType) {
case 'restaurant':
map = <div>Your Restaurant component here</div>;
break;
case 'school':
map = <div>Your School component here</div>;
break;
}
return(
<div>
<div className="container">
<div className="row">
<div className="col-md-12">
<div className="location-info-container">
<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">{map}</div>
</div>
)
}
}
// Render it
ReactDOM.render(
<PropertyMap />,
document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
But if you want to use the height method, maybe something like this is better (using style and class attribute)
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
});
}
render() {
const { propertyType } = this.state
return(
<div>
<div className="container">
<div className="row">
<div className="col-md-12">
<div className="location-info-container">
<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 style={{height: (propertyType === 'restaurant') ? '100%' : '0%'}}>Your Restaurant component here</div>
<div style={{height: (propertyType === 'school') ? '100%' : '0%'}}>Your School component here</div>
<div style={{height: (propertyType !== 'restaurant' && propertyType !== 'school') ? '100%' : '0%'}}>Your Default component here</div>
*/}
<div className={(propertyType === 'restaurant') ? 'show' : 'hide'}>Your Restaurant component here</div>
<div className={(propertyType === 'school') ? 'show' : 'hide'}>Your School component here</div>
<div className={(propertyType !== 'restaurant' && propertyType !== 'school') ? 'show' : 'hide'}>Your Default component here</div>
</div>
</div>
)
}
}
// Render it
ReactDOM.render(
<PropertyMap />,
document.getElementById("root")
);
.show {
width: 100%;
display: block;
}
.hide {
width: 0%;
display: none;
}
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
Upvotes: 1
Reputation: 259
I could not upvote the comment earlier so I'll just post the solution here. As advised, I put all my code from the componentDidMount
into the render
function and it worked.
Upvotes: 0