CODEWITHSUNDEEP
javascriptreactjs
Swapna
Swapna

Reputation: 843

Add Class to the element where Clicked event happens in React JS

I have 5 such list items i.e self , parents , siblings , relative, friend. Clicking on any item , I am adding a class called active-option . Below is my code , what I have done so far. To note , I am a new to React JS.

See Picture

import React, { Component } from 'react';
import {Grid, Col, Row, Button} from 'react-bootstrap';
import facebook_login_img from '../../assets/common/facebook-social-login.png';

const profilesCreatedBy = ['Self' , 'Parents' , 'Siblings' , 'Relative' , 'Friend'];

class Register extends Component {

  constructor(props) {
    super(props);
    this.state = { addClass: false };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ addClass: !this.state.addClass });
  }

  render() {

    let selectOption = ["option"];
    if (this.state.addClass) {
      selectOption.push("active-option");
    }

    return (
        <section className="get-data__block" style={{padding: '80px 0 24px 0'}}>
          <Grid>
            <Row>
              <Col sm={10} md={8} mdOffset={2} smOffset={1}>
                <p className="grey-text small-text m-b-32"><i>
                    STEP 1 OF 6 </i>
                </p>

                <div className="data__block">

                    <div className="step-1">
                     <p className="m-b-32">This profile is being created by</p>
                      <Row>
                      {profilesCreatedBy.map((profileCreatedBy, index) => {
                       return  <Col className="col-md-15">
                                  <div onClick={this.handleClick} className={selectOption.join(" ")}>
                                        {profileCreatedBy}
                                  </div>
                               </Col>;
                        })}
                      </Row>
                    </div>

                    <Row className="text-center">
                      <Col xs={12} className="text-center">
                      <Button href="#"  bsStyle="primary" className="m-t-96 m-b-16 has-box__shadow" >
                            Continue
                      </Button>

                      </Col>


                    </Row>
                </div>

              </Col>
            </Row>
          </Grid>
        </section>
    );
  }
}

export default Register;

I am using a map function to display all items. I have tried to add a class called active-option to option. But clicking on any item is adding the class to every other item also. (Attached) Any suggestion ? I want to add active-option class to the one where click event happens, not to every other element. Siblings should not contain active-option class. Please help !

enter image description here

Upvotes: 0

Views: 5810

Answers (1)

Andrii Starusiev
Andrii Starusiev

Reputation: 7764

You can achieve this with keeping active item id in the state of component, for example:

class Test extends React.Component{
    constructor(){
        super();
        this.state = {
            activeId: null
        }
        this.setActiveElement = this.setActiveElement.bind(this);
    }
    setActiveElement(id){
        this.setState({activeId: id})
    }
    render(){
        return(
            <div>
                {
                    [1,2,3,4,5].map((el, index) => 
                        <div className={index === this.state.activeId? "active" : ""} onClick={() => this.setActiveElement(index)}>click me</div> 
                    )
                 }
            </div>
        )
    }
}

https://jsfiddle.net/69z2wepo/85095/

Upvotes: 5

Related Questions