What is the best way to arrange map items using justify-content-around for optimal display?

I'm currently iterating through products using the map function, but I'm having trouble getting the justify-content-around property to apply. I am working on a React project with Bootstrap 4 integrated.

Below is the code snippet:

{props.products.map((item) => {
                if ( item.inCart ) {
                    return (
                        <div className="d-flex justify-content-around w-100" key={item.id}>
                            <button>remove</button>
                            <div>
                                <h5>{item.name}</h5>
                            </div>
                            <div>
                                <h5>{item.price.toLocaleString('ar-EG')}</h5>
                            </div>
                            <div>
                                <h5>{item.number.toLocaleString('ar-EG')}</h5>
                            </div>
                            <div>
                                <h5>{(item.number * item.price).toLocaleString('ar-EG')}</h5>
                            </div>
                            <hr />
                        </div>
                    );
                }

The display flex class seems to be applying, however the justify-content-around property is not taking effect and there is no margin between the elements.

Is there a way to make them display with justify-content-around properly? Please advise!

javascriptcssreactjstwitter-bootstrap

Answer №1

The issue you're facing is related to the presence of the <hr> tag in your code. I was able to identify this problem while working on a StackBlitz reproduction. Simply removing the <hr> tag resolves the issue.

If you still require a divider, you can recreate it as follows:

const Divider = () => {
  return <div className="border-bottom" />;
};

This particular implementation relies on Bootstrap, but you can easily modify it to be more generic. Just ensure that you place it outside of your flex container like so:

<>
  <div className='d-flex justify-content-around' key={item.id}>
    <button>remove</button>
    <h5>{item.name}</h5>
    <h5>{item.name}</h5>
    <h5>{item.name}</h5>
  </div>
  <Divider />
</>;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Learn the method for attaching bargraph bars to the bottom without specifying a fixed height

I've been struggling to create a bar graph displaying visitor statistics. The challenge lies in attaching the bars to the bottom without knowing their exact height beforehand. Since my code uses percentages for the height and it fluctuates each time y ...

htmlcss

Does NextJs have a feature or function similar to the createRef() hook found in traditional ReactJs?

Trying to utilize a 3rd party package called ReactPhotoSphereViewer in NextJs to showcase panoramic images on the website. The package functions well in both NextJs and ReactJs. Below is the code that functions in ReactJs: import { ReactPhotoSphereViewer ...

reactjsnext.jsreact-hookscreate-ref

Conceal a dataLabel for a particular series in Highcharts

Currently, I am dealing with a chart that consists of 5 series - one as columns and the other four as lines with constant values. My dilemma lies in wanting to display dataLabels for only one of those series. Despite my efforts to activate/deactivate dataL ...

javascriptjqueryhighcharts

Leveraging the power of JavaScript to reveal concealed div elements

I've got a collection of divs (five in total) with a hidden class applied to them in my CSS stylesheet. Each div also has its own unique ID. My goal is to use JavaScript to reveal these divs one by one. Here's an example of what I'm looking ...

javascriptcssclasshtml

Incorporating a lasting element into the _app.js file of Next.js

I am currently experimenting with my first Nextjs app and encountering difficulties when trying to incorporate a persistent sidebar. While looking for solutions, I came across Adam Wathan's article on persistent layouts in Nextjs. However, it appears ...

javascriptreactjsnext.jssidebar

Dropdown in Angular JS is displaying incorrect values in the options

I am a newcomer to AngularJS and encountering an issue with populating a dropdown. Within a foreach loop of data retrieved from the server, I have created an array of user data: $scope.Users.push( { userid: ...

javascriptjqueryangularjs

When using Typescript with MUI styled components, there may be issues with recognizing common objects for styles

I'm facing a challenge where I have various styled components with some shared styles. To address this, I decided to create a function that takes in a `theme` parameter and outputs the common styles being used. Here's a glimpse of what I came up ...

reactjstypescriptmaterial-uistyled-components

Cypress 7: Dealing with the onRequest Problem in the cy.intercept Function

We encountered a situation where we needed to assert that a spinner was displayed during a request using the following code: The code functioned properly in Cypress 6.4.0 cy.intercept({ url: '*', onRequest: () => { cy.get('[data- ...

javascriptcypressui-automatione2e-testing

To successfully deploy React with Firebase, it is essential to clear the cache

Recently, I successfully deployed a simple react application that I developed using create-react-app. Following this, I utilized the Firebase CLI to build and deploy the app. However, upon making modifications to the application and redeploying it, I encou ...

reactjsfirebasecaching

Leaflet setStyle changes are effective when applied through the console but do not reflect in the actual

I currently have a map with around 1000 polygons that I am loading onto it. My goal is to color these polygons based on a specific property value. The code snippet below showcases my approach, but the results are not as expected. mapLayerFieldGrid = new L ...

javascriptleaflet

Issue locating the bottom of the scroll bar

My attempt to detect when the scroll reaches the bottom of a div involves using this code: $('.scrollpane').scroll(function(){ if ($(this).scrollTop() + $(this).height() === $("#results").height()) { alert('scroll at bottom&a ...

javascriptjqueryscroll

Node.js program closes immediately upon Java startup

I am building a Discord bot that features a Java FXML interface and utilizes a Node.js program to function as an Audio playing bot. However, I am encountering an issue where the process for Node.js closes immediately when opened in Java. The problem arise ...

javascriptjavanode.jsdiscord

React-router can manage non-matching paths by utilizing a basic JavaScript router configuration

Is there a way to manage non-matching paths using plain JavaScript in React router configuration? const rootRoute = { component: 'div', childRoutes: [ { path: '/', component: App, childRoutes: [ requir ...

javascriptreactjsreact-router

Customize the text color of select list options in Angular 5

Is there a way to style the foreground colors of select list options differently in this dropdown code? <select id="tier" class="form-control" [(ngModel)]="tierId"> <option *ngFor="let m of tierList" value="{{m.tier}}" > {{m.option ...

htmlcssangularangular5

Steps for connecting a text to the Polyline feature in the React Google Maps API

I am attempting to display the distance attribute on top of the PolyLine with a 45% offset (almost next to the arrow) in this code snippet. Despite my efforts, I have not been able to achieve this successfully. <GoogleMap id="react-google-m ...

reactjsgoogle-mapsgoogle-maps-api-3google-polylinereact-google-maps-api

"Is there a way to modify the color of the button once it's been clicked, but only for the specific button that was

Looking to create a Quiz App using React and facing an issue where all buttons change color when clicked, instead of just the one that was clicked. Any solutions on how to make only the clicked button change its color in React.js? App.js import Main from ...

javascripthtmlcssreactjs

Update the font style of the navigation bar

Hey there! I recently downloaded a template from this website: . However, I'm facing an issue with the nav bar displaying strange fonts when using Vietnamese letters. For example, "Nước" shows up as all uppercase and the letters "uo" are shortened. ...

htmlcssnavbar

Are the JQuery appended elements exceeding the width of the parent div?

I have an HTML div that is styled using the Bootstrap class span9. <div class="span9"> <div id = "selectedtags" class="well"> </div> <button class="btn" type="button" id="delegatecontent">Generate report</button&g ...

javascriptjqueryhtmlcsstwitter-bootstrap

Resetting forms in AngularJS 1.5.6 with ng-messages functionality

I have been searching for solutions on Stackoverflow regarding how to reset a form, but I am still not able to figure it out. Even though the input was valid, the error message kept showing up. Upon debugging the application, I noticed that the message was ...

javascriptangularjsangular-material

Can you explain the significance behind this unorthodox CSS code?

Assisting a customer in updating their Shopify theme. The previous designer used an unconventional method to establish the grid system. I require assistance in decoding the code. I came across an old article on this topic but still couldn't grasp it. ...

csscss-selectors