CODEWITHSUNDEEP
javascripthtmlcssreactjs
sookie
sookie

Reputation: 2517

Create a div (or other element) that behaves simply as a container (no other functionality)

I'm looking to create an 'empty' container div that has the single purpose of grouping child elements. In other words, this container should have no effect on other elements in the page.

The reason I need such a container is for the purpose of grouping React elements without affecting page layout and styling.

const ReduxObservers = function(props)
{
    return (
        <EmptyContainer>
            <ReduxObserver1/>
            <ReduxObserver2/>
        </EmptyContainer>
    );
}

const AppContainer = function(props)
{
    return (
        <EmptyContainer>
            <App/>
            <ReduxObservers/>
        </EmptyContainer>
    );
}

Above is only a crude example, but it helps to demonstrate what I'm trying to achieve.

<AppContainer> wraps those components (with the help of our <EmptyContainer>) and may be a child of <body> or some other element.

How can I design <EmptyContainer> such that it has no effect on layout/styling of its surrounding/child elements?

I had thought of having <EmptyContainer> 'clone' its parent element through all: inherit; however I foresee problems with this method (e.g cases where parent has padding or margin) which would not make it a true copy. Setting an additional margin: 0px; padding: 0px; might circumvent this issue, but I fear that other issues may arise.

Ideally, if there was a way to cascade styling and layout to the first 'non-empty' ancestor, that would be the best solution. For example, if we had a <parent> -> <EmptyContainer> -> <child> hierarchy.. If let's assume <child> had width:100%; height:100%, that it would calculate these properties and any other layout/styling from <parent>, ignoring <EmptyContainer> entirely. But I've haven't been able to find a way of doing this.

I also thought of setting the <EmptyContainer> div to position:absolute; so that it's layout would not affect it's children, but again this doesn't cover all cases.

And so I've turned to you in the hope that there might be some solution out there for what I'm trying to do.

Upvotes: 0

Views: 481

Answers (2)

margaretkru
margaretkru

Reputation: 2781

If you are using React 16, you can use fragments, like this:

const AppContainer = function(props) {
    return (
        <React.Fragment>
            <App/>
            <ReduxObservers/>
        </React.Fragment>
    );
}

As mentioned by @stojkosd in the comments, don't forget import React, { Fragment } from 'react'.

If you can't use React 16, there is a way to define a component that would act as a wrapper but won't render any markup. The component in this case is usually called Aux (from auxiliary) and it will just render its children passed as props. Here is what the component looks like:

const Aux = (props) => (props.children);

Then you can do:

const AppContainer = function(props) {
    return (
        <Aux>
            <App/>
            <ReduxObservers/>
        </Aux>
    );
}

Upvotes: 2

Pubudu Dodangoda
Pubudu Dodangoda

Reputation: 2874

As mentioned in the comment, if you are trying to do this because of the requirement that was there to return a single element from the render method, that is no longer required in React 16.

If not, you can use the following approaches (which are not based on React btw)

  1. Use a span tag. span tag does nothing, just as a div except that the div tags display the children as a block, and span display inline.
  2. Use the HTML5 section tag.

Upvotes: 1

Related Questions