How can you add styles in reactJs for show/hiding google maps?

Question

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.

Answer 1

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>

Answer 2

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.