Toggle Class of one element if selected option-CodePudding

I need to toggleclass between display:block and display:none, only if the third item of select option is clicked. This is what i have:

import React, { Component, useState, useEffect } from 'react'
import styles from '../styles/Home.module.css'

class Formulario extends Component {

    constructor(props) {
        super(props);
        this.toggleClass = this.toggleClass.bind(this)
        this.state = {
            active: false,
        };
    }

    toggleClass(event) {
        event.preventDefault();
        const { value } = event.target;
        if (value === 'a3') {
            const currentState = this.state.active;
            this.setState({ active: !currentState });
        }
    };

    render(){              
        return(
            <></div><div className="form-group">
                    <label className="col-md-4 control-label">First select</label>
                    <div className="col-md-4 selectContainer mx-auto">
                        <div className="input-group">
                            <span className="input-group-addon"><i className="glyphicon glyphicon-list"></i></span>
                            <select name="department" onClick={this.toggleClass} id="department" className="form-control selectpicker">
                                <option>Seleccionar sector</option>
                                <option value="a1">A1</option>
                                <option value="a2">A2</option>
                                <option value="a3">A3</option>
                            </select>
                        </div>
                    </div>
                </div><div className={this.state.active ? `${styles.none} form-group area` : `${styles.block} form-group area`}>
                    <label className="col-md-4 control-label">Another Input</label>
                    <div className="col-md-4 selectContainer mx-auto">
                        <div className="input-group">
                            <span className="input-group-addon"><i className="glyphicon glyphicon-list"></i></span>
                            <input name="organismoagn" placeholder="Área" className="form-control"  type="text" />
                        </div>
                    </div>
                </div></>
        )
    
    }
}

export default Formulario;

Tried with onChange in A3 item but dont do anything, and with toggleClass i have made a condition but gives me error. Tried also with vanillajs but doesn't work on react/nextjs.

What would be the best way to implement that if a3 is selected then display the formgroup below? thanks in advance!

UPDATE:

I managed to solve it with onClick event: this is what i did!

Just with if else statement switched the states to false inside the else so i could make it to work!!! i really appreciate your help! the onChange also worked for me! after i tried with.

toggleClass(event) {
    event.preventDefault();
    const { value } = event.target;
    if (value === 'a3') {
        const currentState = this.state = {
            active: true,
        }
        this.setState({ active: !currentState });
    } else {
        const currentState = this.state = {
            active: false,
        }
        this.setState({ active: currentState });
    } 
};

CodePudding user response：

Your select should handle onChange instead of onClick

<select name="department" onChange={this.toggleClass} id="department" className="form-control selectpicker">
     <option>Seleccionar sector</option>
     <option value="a1">A1</option>
     <option value="a2">A2</option>
     <option value="a3">A3</option>
</select>

And then update your toggleClass accordingly

toggleClass(event) {
   if (event.target.value === 'a3') {
      const currentState = this.state.active;
      this.setState({ active: !currentState });
   }
};

You also can use prevState to avoid asynchronous states

toggleClass(event) {
   if (event.target.value === 'a3') {
      this.setState((prevState) => ({ ...prevState, active: !prevState.active }));
   }
};

CodePudding user response：

How are you?

You could use some conditional rendering instead of class... It would be something like this (sorry if I mess up your code, this is just an example).

                    <div className="col-md-4 selectContainer mx-auto">
                    <div className="input-group">
                        <span className="input-group-addon"><i className="glyphicon glyphicon-list"></i></span>
                        <select name="department" onClick={this.toggleClass} id="department" className="form-control selectpicker">
                            <option>Seleccionar sector</option>
                            <option value="a1">A1</option>
                            <option value="a2">A2</option>
                            <option value="a3">A3</option>
                        </select>
                    </div>
                </div>
               {!!this.state.active &&
                 <form inside>
                 </form inside>
               }