CODEWITHSUNDEEP
reactjs
user11733988
user11733988

Reputation:

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

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>

Upvotes: 1

Views: 1138

Answers (2)

Aaquib
Aaquib

Reputation: 444

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

Upvotes: 0

rodamn
rodamn

Reputation: 2211

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.

Upvotes: 1

Related Questions