CODEWITHSUNDEEP
reactjs
derek
derek

Reputation: 41

Conditional rendering + React

i tried making a method that holds the previous state, and changes back to the the previous state on click. Yet I checked if the method was working, and it was properly changing between true and false.

Yet, when I do a ternary operator in the className, it stays as the true value, and does not let me toggle between two classes. The first being the regular border, and the second having the position absolute with the checkmark to indicate it was selected. Even when I check dev tools, 'checkmark' is the className but nothing changes onClick...

import React from 'react';
import './Questions.css'
import girl_sweat from './girl_sweat.jpg'

class Questions extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            isChoiceClicked: false
        }
        this.handleChoice = this.handleChoice.bind(this);
    }

  
    handleChoice(){
    this.setState(prevState => ({isChoiceClicked: !prevState.isChoiceClicked}));
    }

 

    render(){
        const isChoiceClicked = this.state;

        return <div className="banner_column">
        <div className="banner_column_1"><img src={girl_sweat}/></div>
        <div className="banner_column_2"><div className="survey_enter"><h2 className="title">What are you interested in?</h2>
                <p className="description">Select up to <strong>3 areas</strong></p>
                <div className="choices">
                <div className={`choice_container ${isChoiceClicked ? 'checkmark': 'null'}`} onChange={this.handleChoice}><h5>Yoga</h5><p className="activities">Vinyasa, Ashtanga, Kundalini, Hatha, Restorative, Prenatal</p></div>
                <div className={`choice_container ${isChoiceClicked ? 'checkmark': 'choice_container'}`} onChange={this.handleChoice}><h5>Fitness</h5><p className="activities">Strength, Barre, Pilates, HIIT, Core, Stretching</p></div>
                <div  className={`choice_container ${isChoiceClicked ? 'checkmark': 'choice_container'}`} onChange={this.handleChoice}><h5>Mindfullness</h5><p className="activities">Meditation, Breathwork, Sound Bath, Yoga Nidra</p></div>
                <div className={`choice_container ${isChoiceClicked ? 'checkmark': 'choice_container'}`} onChange={this.handleChoice}><h5>Skills</h5><p className="activities">Handstands, Arm Balances, Flexibility, Mobility</p></div>
                </div>
                <div className="next"><button className="next_question">next question</button></div>
            </div>
    </div>
</div>
    }
    
    }

    export default Questions; ```


.choice_container {
  margin: 0 auto;
  width: 250px;
  padding: 1rem;
  border: solid 0.5px black;
  position: relative;
}

.choice_container .checkmark {
  display: hidden;
  position: absolute;
  border: solid 2px black;
  right: -8px;
  top: -8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #000;
  color: #fff;
  content: "✓";
}```

Upvotes: 0

Views: 156

Answers (1)

tcf01
tcf01

Reputation: 1789

Even when I check dev tools, 'checkmark' is the className but nothing changes onClick

The function you activate should be onClick rather than onChange.

Usually onChange can be used in <input> and <select>. However, if you are using div, using onChange seems to be a problem.

<div className={`choice_container ${isChoiceClicked ? 'checkmark': 'null'}`} onClick={this.handleChoice}><h5>Yoga</h5><p className="activities">Vinyasa, Ashtanga, Kundalini, Hatha, Restorative, Prenatal</p></div>

Besides, I guess you wanna destructure from this.state. Therefore, you can do the following thing.

 const isChoiceClicked = this.state;

 const { isChoiceClicked } = this.state;

Upvotes: 1

Related Questions