How to conditionally render and hide multiple components onClick in JSX?

Question

My Class Component houses 4 different buttons. Ideally when the user presses one of those buttons an Accordion Element corresponding to that button should render. Like if someone presses the summary button the summaryAccordion will render etc.

The problem is I don't know how to render only that component based on the button click.

If the user presses the summary button the summaryAccordion will render, but if the user presses the rates button after the summary button, the summary accordion should hide itself then the ratesAccordion should render. This same logic should be carried to all four buttons.

Below is my attempt at solving this:

class TabMenuButtons extends Component {
    constructor(props) {
        super(props);
        this.state = {
            rendersummaryAccordions: false,
            renderservicesAccordions: false,
            rendertravelAccordions: false, 
            renderratesAccordions: false, 

            isSummaryAccordionActive: false, 
            isServicesAccordionActive: false, 
            isTravelAccordionActive: false, 
            isRatesAccordionActive: false, 


        };


    }

        // The Summary Button onClick calls this function to set the state of the summaryAccordionDetector variable
        setStateifSummaryAccordionsActive = () => {
            this.setState({isSummaryAccordionActive: true})
            console.log(this.state.isSummaryAccordionActive)
            this.callSummaryAccordionsLogicGate();
            console.log("setStateisSummaryAccordionsActive Was called")
        }

        //Then the function above  calls this function that checks if the summaryAccordionDetector variable is really true 
        callSummaryAccordionsLogicGate = () => {
            if (this.state.isSummaryAccordionActive) {
                console.log("callSummaryAccordionsLogicGate found that theSummaryAccordion is active")
               this.summaryAccordionsLogicGate();

            }
            else {
                console.log("callSummaryAccordionsLogicGate found that the summary accordion wasn't active")
            }
        }

        //If the function above verifies that the summaryAccordionDetector is really true it calls this function which renders the summary accordion
           summaryAccordionsLogicGate = () => {
                this.setState({rendersummaryAccordions: true});
                console.log("summaryAccordionsLogicGate was called, render the summary accordion")
        } 


        // The Services onClick calls this function to set the state of the servicesAccordionDetector variable
        setStateifServicesAccordionsActive = () => {
            this.setState({isServicesAccordionActive: true})
            console.log(this.state.isServicesAccordionActive)
            this.callServicesAccordionsLogicGate();
            console.log("setStateisServicesAccordionsActive Was called")
        }

        //Then the function above  calls this function that checks if the summaryAccordionDetector variable is really true 
        callServicesAccordionsLogicGate = () => {
            if (this.state.isServicesAccordionActive) {
                console.log("callServicesAccordionsLogicGate found that theSummaryAccordion is active")
               this.servicesAccordionsLogicGate();

            }
            else {
                console.log("callServicesAccordionsLogicGate found that the summary accordion wasn't active")
            }
        }

        //If the function above verifies that the summaryAccordionDetector is really true it calls this function which renders the summary accordion
        servicesAccordionsLogicGate = () => {
            this.setState({renderservicesAccordions: true});
            console.log("servicesAccordionsLogicGate was called, render the services accordion")
    } 



        render() {
//PlaceHolder Variables for the Accordions
            let summaryAccordionPlaceHolder = null
            let servicesAccordionPlaceHolder = null
            let ratesAccordionPlaceHolder = null
            let travelAccordionPlaceHolder = null

//If renderSummaryAccordions is true and renderServicesAccordions is false then set a variable equal to the summaryAccordion Element so that it can render
            this.state.rendersummaryAccordions && this.state.renderservicesAccordions === false ? summaryAccordionPlaceHolder =  : summaryAccordionPlaceHolder = null;
            this.state.renderservicesAccordions && this.state.rendersummaryAccordions === false ? servicesAccordionPlaceHolder =  : servicesAccordionPlaceHolder = null;


            return (
                
                    
                        
                            
                                
                                    
                                
                                
                                    
                                
                                
                                    
                                
                                
                                    
                                
                            
                        
                    
                    

                        {/* EDIT THIS to become dynamic */}
                          ITEM: $67,000.00  
                         ITEM: $5,000.00  
                         ITEM: $54,406.00 
                          ITEM: 1,000 
                         ITEM: 20.00%
                    
                    

{/* Render the placeHolder Elements here */}
                {ratesAccordionPlaceHolder}
                {servicesAccordionPlaceHolder}
                {travelAccordionPlaceHolder}
                {summaryAccordionPlaceHolder}
                
            );
        }

    }

I am new to React any help is appreciated

EDIT 1:

class TabMenuButtons extends Component {
    constructor(props) {
        super(props);
        this.state = {
        renderSummaryAccordion: false,
        renderServicesAccordion: false,
        renderTravelAccordion: false, 
        renderRatesAccordion: false

        };


    }





        render() {


            return (
                
                    
                        
                            
                                
                                    
                                
                                
                                    
                                
                                
                                    
                                
                                
                                    
                                
                            
                        
                    
                    

                        {/* EDIT THIS to become dynamic */}
                          ITEM: $67,000.00  
                         ITEM: $5,000.00  
                         ITEM: $54,406.00 
                          ITEM: 1,000 
                         ITEM: 20.00%
                    
                    

{this.state.renderSummaryAccordion && }
{this.state.renderServicesAccordion && }
                
            );
        }

    }

Dupocas · Accepted Answer

You just need to bind the button click to a state's property (usually a boolean) and use conditional render to render only those components that should be displayed:

render(){
    return (
        <>
            
            
                 {condition1 && foo}
                 {condition2 && foo}
            
        
    )
}

How to conditionally render and hide multiple components onClick in JSX?

Answers (1)

Related Questions