React conditional if statement causing unexpected token syntax error-CodePudding

I'm creating a WordPress Gutenburg block with React Slick slider component.

I have a conditional setting and statement to display the slider:

const blockContent = (
    <div { ...blockProps} >
    { blockLayout === 'displaySlider' && (
        <Slider {...settings} >
    ) }

    // other block code here

    { blockLayout === 'displaySlider' && (
        </Slider>
    ) }
    </div>
);

But I'm getting the following error:

SyntaxError: .../src/edit.js: Unexpected token

    { blockLayout === 'displaySlider' && (
        </Slider>
        ^
    ) }

Any ideas?

Thanks!

CodePudding user response：

You can't conditionally begin or conditionally end an element like that. Put the block code in its own variable, then use a single condition to either have only that, or to surround it in both Slider tags.

const blockCode = // other block code here
const blockContent = (
    <div { ...blockProps} >
    {
      blockLayout === 'displaySlider'
        ? <Slider {...settings} > {blockCode} </Slider>
        : blockCode
    }
);