Set initial const based on viewport width react js

Question

I'm building a photo gallery in react js and various values (thumbnail size, image size) have to change based on the width of the viewport. The values that need to change are the basis of various calculations in the application so can't simply be put in a stylesheet. Without wishing to get bogged down in the inner workings of the thing I set the initial values in my render method like so:

    // vars
    const thumbWidth = 75;
    const viewWindowWidth = thumbWidth * 5;
    const thumbContainerwidth = thumbWidth * 5;
    const thumbContainerHeight = 75;        

    let thumbContainerWidth = this.state.photos.length * thumbWidth; 
    let thumbContainerPos = this.state.thumbContainerPos;

    let dynamicStyles = {
        thumbContainerOuter : {
            width: thumbContainerwidth
        },
        thumbContainerInner : {
            left: thumbContainerPos
        } 
    }

What I want to do is make the thumbWidth value larger if the vp size is larger and for it to base out at 75 beneath, say, 480px (or other arbitrary value).

The approach I've tried thus far probably reflects my relative newness to react js, I include the following at the start of the component:

if(window.innerWidth >= 480 ) {
   const thumbWidth = 75;
} else {
   const thumbWidth = 100;
}

Unfortunately, doing this means that react flags up 'thumbWidth' as undefined wherever it is used subsequently.

The same happens if I include it in componentDidMount or in the render method itself.

I've looked at node packages such as contra/react-responsive but these seem to be about enclosing jsx in media queries which doesn't solve the issue. Am I just doing something really silly or is this a tricky one to sort out?

const has a block scope, meaning it is only available within the if {} block. If you want to use it outside the block, you need to define it earlier using let. — Gerard
– Gerard, Commented Aug 27, 2018 at 9:07
As Gerard mentioned both let and const has block scope and if they are defined inside if block for eg then they are not available outside if or else — Hemadri Dasari
– Hemadri Dasari, Commented Aug 27, 2018 at 9:10

Logar · Accepted Answer · 2018-08-27 09:10:44Z

1

const is blocked-scope so declaring it inside an if won't make it available outside of the if block. You could either declare let thumbWidth in a higher scope or just use a ternary expression :

const thumbWidth = window.innerWidth >= 480 ? 75 : 100

answered Aug 27, 2018 at 9:10

Logar

1,2489 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Stef Over a year ago

Thanks :-) As an addition, if I wanted it to change to the relevant value when the window resized what would be the approach? Or should i include that as separate question?

Logar Over a year ago

While it's quite closely related to your original question the problem is completely different, so I'd suggest you make another question yes ;)

Collectives™ on Stack Overflow

Set initial const based on viewport width react js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related