CODEWITHSUNDEEP
javascriptcssreactjstypescript
edche
edche

Reputation: 680

How to add border to a active div?

I want to make a border when the user set a div active. I tried to add hover, selected and active, but it did not work.

This is the part that user will select

   {this.state.fields.map((fields, k) =>
              <div key={k} onClick={() => this.setState({
                activeFields: fields
              })}>
                <div className="detailsPage-details " >
                  {fields.map((field) =>
                    <p key={k}>
                      {field.value}: {field.key}
                    </p>
                  )}
                </div>

              </div>
            )}

How can I do that?

Upvotes: 0

Views: 69

Answers (1)

Endrit Shabani
Endrit Shabani

Reputation: 337

Your fields should have a unique field so that you could check which field was set to active, you could use the index of the array but it is not preferred as could lead to bugs.

 {this.state.fields.map((field, k) =>
              <div className={this.state.activeField===field.id?"active-div":""} key={k} onClick={() => this.setState({
                activeField: field.id
              })}>
                <div className="detailsPage-details " >
                  {fields.map((field) =>
                    <p key={k}>
                      {field.value}: {field.key}
                    </p>
                  )}
                </div>

              </div>
            )}

Upvotes: 1

Related Questions