React render style based on number of elements in an Array

Question

I'm working on an accordion feature in an application that shows brackets based on the number of items displayed from an array.

Based on the sizes of the brackets, I've come up with a solution using standard css for a single bracket

|_

    .bracket {
      height: 35px;
      width: 20px;
      background-color: transparent;
      border-left: 1px solid grey;
      border-bottom: 1px solid grey;
    }

and flex-box for a bracket to use in a multiple item array in order to produce the effect as shown above.

|_
|


    .bracket_container {
      display: flex;
      flex-direction: column;

      .bracket {
        height: 35px;
        width: 20px;
        background-color: transparent;
        border-left: 1px solid grey;
        border-bottom: 1px solid grey;
      }
      .bottom {
        height: 35px;
        width: 20px;
        background-color: transparent;
        border-left: 1px solid grey;
      }
    }

Visually this works fine with my mapped array as all the boxes appear connected, however, now I want to conditionally render these style classes in ReactJS based on the following.

#1 I want to show the single .bracket if only 1 item in the array is shown or it is the last item in the array.

         {/* OPEN CONTAINER */}
          {tracks?.uid === showConnections &&
            tracks?.feed.map((item) => (
              <div key={item.uid} className={style.sub_container_wrapper}>
//Here is where I want to conditionally render the brackets
                {feed.item !== 1 ? (
                  <div className={style.bracket_container}>
                    <div className={style.in_bracket} />
                    <div className={style.bottom} />
                  </div>
                )
                  : (
                    <div className={style.bracket} />
                  )}

Tracks is the upper area of the accordion & feed is my array in the dropdown area which has the array (from an external JSON file).

The logic isn't working because I'm not sure what should be extracted from the feed object or in what way should I get the first or last item in the array.

map will also pass the index of the element as an argument you can use that to determine if you're on the last item. tracks?.feed.map((item, index) — Ramesh Reddy
– Ramesh Reddy, Commented Jul 9, 2020 at 9:16

Ramesh Reddy · Accepted Answer · 2020-07-09 10:04:41Z

1

The callback passed to map also accepts the index argument so you can use that to conditionally render the JSX.

{
    tracks?.uid === showConnections &&
        tracks?.feed.map((item, index) => (
            <div key={item.uid} className={style.sub_container_wrapper}>
                { (index === tracks.feed.length - 1) ? (
                    // JSX for the last item in the array
                ) : 
                 // JSX for everything other than the last item
                }

edited Jul 9, 2020 at 10:04

answered Jul 9, 2020 at 9:32

Ramesh Reddy

10.7k3 gold badges22 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Noble Polygon Over a year ago

This worked. The only thing I had to do was remove .map from the answer in order for it to display in the way I intended.

Ramesh Reddy Over a year ago

@RHBlanchfield Hehe that was a typo. Glad you figured it out.

Collectives™ on Stack Overflow

React render style based on number of elements in an Array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related