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?

CodePudding user response：

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>
            )}