0

I am working with this demo workspace - Demo

Here I have an array.

var a = [{"id":"firstName","value":["Sam3","Sam5"]},{"id":"lastName","value":["Jones4","Jones5"]}]

This is a React based project. I want to show this as a style in the page (instead of an array). I want to show this like this image .

Image

This is elliptical, and not any irregular shape.

There will be a also a cross button along with the array.

<div>
<div>id: val0,val1 (and a cross button to remove this filter)</div>
<div>id: val0,val1 (and a cross button to remove this filter)</div> .... so on
</div>

How to display this array in this type of elliptical style

Kindly answer wrt to my Demo Fiddle

Image

firstName: Sam2, Sam3 will be in one elliptical box while lastName: Jones3, Jones5 will be in another box. There can be dozens of boxes, I am working with 2 at this moment.

The boxes will be like this

Image

In the blank area of the elliptical boxes the text will go and then the cross button/icon

Community
  • 1
  • 1
tommy123
  • 587
  • 1
  • 10
  • 28
  • You can customise the styling and icon position too ...please check this https://react-select.com/components – Geeky Jan 06 '19 at 18:46
  • https://stackoverflow.com/questions/45291508/how-to-style-react-select-options – Geeky Jan 06 '19 at 18:46

0 Answers0