How to declare const that contains JSX inside a condition and access it outside the condition?

Question

I'm having a problem with a component that should render pictures if (and only if) some are passed in props.

I've declared a const UserImagesJsx inside a condition, but I can't access it inside the returned expression, it tells me it's undefined.

Here is the code:

import React from 'react';
import styled from 'styled-components'

import FlickityComponent from 'react-flickity-component'
import 'flickity/css/flickity.css'

const ImagesContainer = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
`

const flickityOptions = {...}

function UserImages(props) {

    const userPictures = props.images;

    if (userPictures) {
        const UserImagesArray = () => {
            return (
                userPictures.map((text, index) => 
                    <img id={`profile-image-${index}`} src={text.url} alt={text.name} key={text.name} />
                    // onClick={() => openModal(text._id)}
            ));
        }

        const UserImagesJsx = () => {
            return (
                <ImagesContainer>
                    <FlickityComponent className={'carousel'} elementType={'div'} options={flickityOptions}>
                        <UserImagesArray/>
                    </FlickityComponent>
                </ImagesContainer>
            );
        }
    }

    return (
        <ImagesContainer>
            { userPictures && <UserImagesJsx/> }
        </ImagesContainer>
    );  
}

export default UserImages;

You're not declaring a const with JSX inside, you're defining new React function components. [It is an anti-pattern to declare components inside the render function](https://stackoverflow.com/a/59636503/1218980). — Emile Bergeron, Mar 02 '20 at 17:31

TKoL · Answer 1 · 2020-03-02T17:32:10.643

-1

const is block scoped -- try declaring it before your if statement.

let UserImagesJsx;
if (userPictures) {
  ...
  UserImagesJsx = () => ...
}

edited Mar 02 '20 at 17:32

answered Mar 02 '20 at 17:14

TKoL

13,158
3
39
73

1

`Uncaught SyntaxError: Missing initializer in const declaration`, you can't declare a `const` without a value, and you can't reassign it later, that's the whole point of `const` in JS. – Emile Bergeron Mar 02 '20 at 17:30
ah of course, `let` then is better – TKoL Mar 02 '20 at 17:31
In this case, it doesn't matter because defining components inside of render is an anti-pattern anyway. – Emile Bergeron Mar 02 '20 at 17:33
Thanks for taking the time replying. I thought only let was block scope. If i declare a const and assign it a value, i can't changed it afterwards in my condition. If i don't assign it a value intellisense tell me there is a parsing error in this line – Nico Mar 02 '20 at 17:37
Use `let` rather than `const` and see if it works. you could even declare it like this: `let UserImagesJsx = () => null` – TKoL Mar 02 '20 at 17:46

score -1 · Answer 2 · answered Mar 02 '20 at 17:22

As TKoL said, const is block scoped, so if the condition isn't satisfied, your variables won't be declared. You also can try this:

 function UserImages(props) {

      const userPictures = props.images;

      if (userPictures) {
        const UserImagesArray = () => {
          return (
            userPictures.map((text, index) =>
              <img id={`profile-image-${index}`} src={text.url} alt={text.name} key={text.name} />
              // onClick={() => openModal(text._id)}
            ));
        }

        const UserImagesJsx = () => {
          return (
            <ImagesContainer>
              <FlickityComponent className={'carousel'} elementType={'div'} options={flickityOptions}>
                <UserImagesArray />
              </FlickityComponent>
            </ImagesContainer>
          );
        }

        return (
          <ImagesContainer>
            {userPictures && <UserImagesJsx />}
          </ImagesContainer>
        );

      } else {

        return null;

      }


    }

How to declare const that contains JSX inside a condition and access it outside the condition?

2 Answers2