How can I select only one element from a map function?

Question

I'm using a map function to render many events in a page. When I click on an event, I should see the descrition of the event below that event. Currently, the description of the event I want appears for every event on the map, which is bad.

How can I do, so the description of the event appears only in the event that I am clicking?

<div className="dayDiv">
  <p className="text day"> {day} </p>{" "}
  <div className="eventsDiv">
    {" "}
    {this.state.events &&
      this.state.events.map(data => {
        if (
          date.getUTCDate() === data.day &&
          date.getMonth() === data.month
        ) {
          return (
            <div className="event">
              <p className="text">
                <span className="time">
                  {" "}
                  {data.time} {data.meridian} -{" "}
                </span>{" "}
                {data.title}{" "}
              </p>{" "}
              <div
                onClick={e => this.expandEvent(data.id)}
                className="smallPlusDiv"
              >
                <i className="fa fa-caret-down"> </i>{" "}
              </div>{" "}
              {this.state.eventData &&
                this.state.expandEvent &&
                this.state.expandEvent === true && (
                  <div>
                    <table className="text eventDescription">
                      <tr className="text eventDescription">
                        <td className="text eventDescription">Where:</td>{" "}
                        <td className="text eventDescription">
                          {" "}
                          {this.state.eventData.data.adress}{" "}
                        </td>{" "}
                      </tr>{" "}
                      <tr>
                        <td className="text eventDescription">When:</td>{" "}
                        <td className="text eventDescription">
                          {" "}
                          {this.state.eventData.data.time}{" "}
                          {this.state.eventData.data.meridian}{" "}
                          {this.state.eventData.data.day}{" "}
                          {this.state.eventData.data.month}{" "}
                        </td>{" "}
                      </tr>{" "}
                      <tr>
                        <td className="text eventDescription">About:</td>{" "}
                        <td className="text eventDescription">
                          {" "}
                          {this.state.eventData.data.description}{" "}
                        </td>{" "}
                      </tr>{" "}
                      <tr>
                        <td className="text eventDescription">price:</td>{" "}
                        <td className="text eventDescription">
                          {" "}
                          {this.state.eventData.data.price}{" "}
                        </td>{" "}
                      </tr>{" "}
                    </table>{" "}
                  </div>
                )}
            </div>
          );
        }
      })}{" "}
  </div>{" "}
</div>

rodamn · Accepted Answer · 2019-09-08 22:17:31Z

I'd suggest one of the following two approaches:

Create a single React component that encapsulates the rendering of an item from the collection including whether that item is selected or not.
Alternatively, create two different components encapsulating how Selected and non-Selected items are drawn.

Thus, you would run the map function over your collection, calling a React component for each item in the collection. In either case above, you either need to pass to the component a selected={true} or selected={false} property, or call the correct component based on whether the current item that is being mapped is selected.

The single component approach makes the most sense if there is a lot of overlap in appearance between selected and non-selected item, or if one is mostly a subset of the other. Even if you take a separate components approach and one is a subset of the other, you could always render the subset in one component, and include that in the rendering of the superset.

Aaquib · Accepted Answer · 2020-10-24 03:18:07Z

0

You have to use id of element to differ in select and non select elements, I have made one example you can look https://codesandbox.io/s/selecting-single-element-from-map-npkb6?file=/src/App.js

answered Oct 24, 2020 at 3:18

Aaquib

4541 gold badge9 silver badges17 bronze badges

Collectives™ on Stack Overflow

How can I select only one element from a map function?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related