I am currently working on creating a menu with a list of dishes, and I need to include dots to separate the price from the description. I want it to look something like this: https://i.sstatic.net/h7PO4.png
If the description is too long, it should look like this: https://i.sstatic.net/PtmfD.png
Here is the code I am using:
<div className="container-fluid">
{dishes
.filter(dish => dish.category.id === props.category.id)
.map(dish => (
<div key={dish.id}>
<div className="row">
<h1 className="dish-title">{dish.name[state.lang]}</h1>
</div>
<div className="row">
<div className="col px-0">
{dish.description[state.lang] && <div className="dish-desc m-0">{dish.description[state.lang]}</div>}
</div>
<div className="col-auto">
<DishSizes
sizes={dish.sizes}
containerClassName="d-flex flex-column"
priceClassName="dish-price px-1"
/>
</div>
</div>
</div>
))}
</div>
I am retrieving data from my JSON file, specifically from the dishes section that renders all the dishes. The DishSizes component handles displaying the prices for each dish. Does anyone have any suggestions on how to achieve this?