0

I am mapping through my props to display elements formatted as a circle. Each element has a name, image, and a couple of other attributes, called categories. The number of categories differ for each element. I'd like to display each category as a smaller circle with a fixed height, width, starting point, that lays just outside of the main element circle to the left-center. For each new attribute, I want them to follow the outer path of the circle, and up. These shouldn't affect the size or position of any of the elements within the main circle. You can see the pictures for what I am trying to achieve, and my current result at the bottom.

The main topic of this question is the dynamic position of the small circles for the categories.

Desired Outcome. example 2 example 1

What I have so far.. JSX

render() {
    return (
      <Fragment>
        <div className="row" id="ads">
          {this.props.items.map(item => (
            <div className="circle rounded-circle col-md-4 col-lg-3 mt-5">
              <div className="card">
                <div className="card-image">
                  <div>
                    {item.flavor.map(flavor => (
                      <div className="card-attribute">{flavor}</div>
                    ))}
                  </div>
                  {item.category.map(category => (
                    <div className="card-attribute">{category}</div>
                  ))}
                  <img
                    className="rounded mx-auto d-block"
                    src="https://img.icons8.com/ios/100/000000/paprika.png"
                    alt=" Text"
                  />
                </div>
                <div className="card-image-overlay m-auto" />
                <div className="card-body text-center">
                  <div className="ad-title m-auto">
                    <h5>{item.item}</h5>
              </div>
            </div>
          ))}
        </div>
      </Fragment>
    );
  }
}

CSS

.circle {
  border-radius: 50%;
  height: 250px;
  width: 250px;
}

.card {
  border-radius: 50%;
  height: 250px;
  width: 250px;
}

.card-attribute {
  position: relative;
  background: #5bc0be;
  border-radius: 50%;
  text-align: center;
  color: #000;
  font-size: 14px;
  width: 50px;
  height: 50px;
  padding: 15px 0 0 0;
}

This is what is displaying now, as you can see the categories are within the main circle and push down the other elements, they display in a vertical line rather than around the circle. current results

Eat_ Mangos
  • 259
  • 2
  • 15
  • I believe that this question is not related to react, it's a styling question. You need to handle it via CSS, something like this: https://stackoverflow.com/q/12813573/3971911 – dashtinejad May 26 '19 at 05:46
  • Here - then do the math - https://stackoverflow.com/questions/10152390/dynamically-arrange-some-elements-around-a-circle – Paulie_D May 26 '19 at 06:49
  • thanks for that link, but from what i understand the dynamic number of the small circles, and their placement needs to be handled by jsx – Eat_ Mangos May 26 '19 at 06:50

0 Answers0