CODEWITHSUNDEEP
javascripthtmlcssreactjsflexbox
lucahuy
lucahuy

Reputation: 800

Flexbox expand full width an item from array of items

I've got a piece of code doing what it is supposed to do when you run the code snippet. I want filterbox takes the whole width, and flex-item takes one third. 

.view-content {
  display: flex;
  flex-wrap: wrap;
}
.filterbox {
  width: 100%;
}
.flex-item {
  width: 33%;
}
<div class="view-content">
    <div class="filterbox">FILTER</div>
    <div class="flex-item">
      Flex-ITEM
    </div>
    <div class="flex-item">
      Flex-ITEM
    </div>
    <div class="flex-item">
      Flex-ITEM
    </div>
    <div class="flex-item">
      Flex-ITEM
    </div>
 </div>

Now, I want to keep adding more filterbox and flex-item retrieved from an array items. My React code looks like this:

render() {
    return (
        <div className='view-content'>
            {this.items.map((item, index) => {
                return (
                    <div key={index} className='my-container'>
                        <div className='filterbox'>
                            <div>{item.filter}</div>
                        </div>
                        <div className='flex-item'}>
                            <div>{item.flex-item}</div>
                        </div>
                    </div>
                )
            })}
        </div>
    );
}

I had to wrap filterbox and flex-item in my-container and it breaks the flexbox code. How would I fix this?

Upvotes: 2

Views: 1598

Answers (2)

Piotr Wicijowski
Piotr Wicijowski

Reputation: 2115

Since you indicate that the problem is caused by the fact, that React requires to return only one element, maybe you could wrap these elements in a <React.Fragment> instead of a div. Please note that it requires React v16.2 or higher. This way your code would look as follows:

render() {
    return (
        <div className='view-content'>
            {this.items.map((item, index) => {
                return (
                    <React.Fragment key={index}>
                        <div className='filterbox'>
                            <div>{item.filter}</div>
                        </div>
                        <div className='flex-item'}>
                            <div>{item.flex-item}</div>
                        </div>
                    </React.Fragment>
                )
            })}
        </div>
    );
}

This way it satisfies the requirement of having just one item returned in JSX, and in the final markup the fragment is not added as an actual DOM node.

Upvotes: 2

mdubus
mdubus

Reputation: 130

If I understood your problem correctly, it 'breaks' your flexbox code because of the filterbox in the this.item.map

In your item, how do you make the difference between an item that should be a filterbox, and an item that should be a flex-item ? Could you put here a visual example of what you try to achieve ?

Upvotes: 0

Related Questions