Consistently ensuring even horizontal CSS padding throughout all components

I'm working on a website using React and TailwindCSS. Each part of the site is its own React Component, but I want to make sure that all sections have consistent horizontal padding and a maximum width where the content stays centered and doesn't expand with the screen size. To achieve this, I made a component that adds the padding and centers the content when needed.

const Container = ({ children }) => {
  return (
    <div className="grid place-items-center w-full px-[5%] lg:px-[2%] xl:px-[6%]">
      <div className="max-w-[120rem] w-full">
        {children}
      </div>
    </div>
  )
}

Is there a way to get the same result without having to use the component repeatedly in each section?

cssreactjstailwind-css

Answer №1

If you're looking to transform elements within an array, the map function is your friend:

const elements = [
    <Element1/>,
    <Element2/>,
    <Element3/>,
]
transformedElements = elements.map((element) => <div className="grid place-items-center w-full px-[5%] lg:px-[2%] xl:px-[6%]">
        <div className="max-w-[120rem]  w-full">
            {element}
        </div>
    </div>)
return (transformedElements)

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

Async function causing Next JS router to not update page

I'm diving into the world of promises and JavaScript, but I've encountered an issue while working on a registration page following a tutorial on YouTube. Currently, I am using next.js with React and TypeScript to redirect users to the home page i ...

reactjstypescriptnext.js

I'm curious to know more about the middleware function being used in the example found at https://github.com/erikras/react-redux-universal-hot-example

Could someone provide an explanation of the middleware used in this example from https://github.com/erikras/react-redux-universal-hot-example/? It seems that it doesn't support real API requests. export default function clientMiddleware(client) { ret ...

reactjsexpressreduxmiddleware

What are the steps for manually adding items to the cart on BigCommerce?

I discovered a dilemma while utilizing the stencil theme in BigCommerce. We have a React-created page where I am preserving selected options in Redux states: color: { id: 792167289, label: "Color", image: {...} } Furthermore, I manually ca ...

reactjsbigcommerce

Netlify failing to build CRA due to inability to locate local module for method?

I encountered an issue with deploying my site on Netlify. The problem arises when it fails to locate local modules. Below is the log: 12:54:43 AM: Build ready to start 12:54:45 AM: build-image version: 09c2cdcdf242cf2f57c9ee0fcad9d298fad9ad41 12:54:45 AM: ...

reactjstypescriptdeploymentbuildnetlify

Exploring the potential of Vue with Router to create a dynamic multi-page

Struggling to come up with a suitable title for this Vue project dilemma. Here's what I'm facing: Recently started using Router in my Vue project and feeling quite lost. The setup in App.vue simply includes <RouterView>, which seems stra ...

typescriptvuejs3tailwind-cssvue-router

What is the best way to make the NextJS Image Component in React JSX automatically adjust its height?

I need to maintain the aspect ratio while keeping the width fixed. Can you assist me in automatically adjusting the height? I prefer to stick with using the Nextjs Image component if feasible. const Logo = ({ logo }) => { if (logo) { return ( ...

reactjsnext.jsmaterial-ui

What is the process for importing an mp3 file into a TypeScript project?

I'm currently working on a web application using React and TypeScript. My current challenge involves importing an mp3 file for use with the use-sound library, but I keep encountering this error in TypeScript: "Cannot find module '../../as ...

reactjstypescriptimportmp3usesound

What is the best way to extract value from an input field?

Completing tasks to secure a job is not as easy as it seems when using react and redux. When I retrieve values from an input and send them to the reducer, they somehow get lost along the way. The first item received by the reducer successfully gets propert ...

reactjsreduxjsx

How can I access and modify objects within a state array in reactJS when using the setState() method?

Upon reviewing my code, I came across the following declaration: constructor(props) { super(props); this.state = { productArray: [{ barcode: '', name: '' }], numberOfRecords: ...

javascriptreactjs

Difficulties in Adjusting the Size of Three Image Columns within a Website's Body

While working on my website layout, I encountered a problem with inserting three image columns in the body section. The images turned out to be too large and extended beyond the footer. Moreover, the third image was larger than expected, dominating the web ...

htmlcss

Tips for positioning the search form in the navbar header

My brand image and list with 2 glyph-icons & a search form in the navbar header are not aligning properly. The search form button keeps dropping to the line below. Does anyone know a CSS trick to keep it on the same line as the rest of the links? All the ...

htmlcsstwitter-bootstrapnavbar

Creating DIV's with Equal Heights Using AngularJS ng-repeat

I'm currently facing an issue with aligning two side-by-side divs to the same height when the content is generated using an ng-repeat function. Using flexbox is causing responsiveness issues, and I'm unsure of the appropriate time to call a jQuer ...

javascriptjqueryhtmlcssangularjs

Changing between two images using HTML and CSS

I am currently designing a WordPress theme and I would like to create an effect where two different thumbnail images switch on hover. The code that I have come up with so far looks something like this : <a class="thumb" href="posturl"> <img src= ...

javascripthtmlcsshover

Create a full-width slider using Materialize CSS framework

When using materializecss to create a slider, I encountered an issue where the image is full width but not full height, causing scrollbars to appear. What changes can I make to ensure the slider fills out my screen without any scrollbars? Additionally, I ...

javascriptjqueryhtmlcssmaterialize

The Next.js dynamic route in production is displaying a 403 error instead of the expected 404. What might be causing this issue?

Whenever I attempt to access https://site.con/categories/, I am greeted with a 403 Forbidden error. However, if I visit https://site.con/categories/sport, everything works perfectly fine, and all other routes function properly. What could potentially be ca ...

javascriptreactjsnginxnext.jsproduction

Rendering a string in React following the execution of a function containing logic and looping operations

Hey there, I am currently working on rendering a string with some looping logic involved. To achieve this, I have created a function that will handle the task of returning the desired string. function Leasing(){ let {idLeasingExact} = useParams() cons ...

reactjsreact-nativereact-hooksreact-router-dom

Adding or Deleting Rows from Input Table

I'm in the process of creating a website that features an input table allowing users to easily add or remove rows at their discretion. The desired UI is shown below: https://i.sstatic.net/EFAlM.jpg Here is the HTML code I have developed so far: & ...

javascripthtmlcssbootstrap-4

Retrieve the current height of the iFrame and then set that height to the parent div

Within a div, I have an iFrame that needs to have an absolute position for some reason. The issue is that when the iFrame's position is set to absolute, its content overlaps with the content below it. Is there a way to automatically adjust the height ...

javascriptjqueryhtmlcssiframe

Issues with the connection between the socket.io client and server are causing difficulties

Currently setting up a chat application using react and express with socket.io, but encountering an error when trying to connect the client side with the server using socket.io. The issue persists across all browsers including Firefox. Error: Firefox cann ...

reactjsexpresswebsocketsocket.iochat

Having trouble getting Tailwind custom colors to work in my Next.js project

When I try to assign the custom colors configured in tailwind.config.js to a variable and use it, it doesn't work as expected. For example: If we have button.colour = "custom-blue" (color data fetched from the cms and set in the cms) <button class ...

reactjsnext.jstailwind-css