CODEWITHSUNDEEP
javascriptreactjs
Dawn17
Dawn17

Reputation: 8297

Conditional rendering on React.js

render() {
        const tableStyle = this.getTableStyle();
        const tableSettings = this.getTableSettings();

        return (
            <div style={tables}>

                <TablePosition
                    contextMenuOn={true}
                    step={this.props.step}
                    pdfData={this.props.pdfData}
                    tableSettings={tableSettings}
                    tableStyle={tableStyle}
                    fileName={this.state.fileName}
                    tableSize={this.getTableSize()}
                    tableOffset={this.state.tableOffset}
                    desiredWidth={700}
                    updateXOffset={x => this.updateXOffset(x)}
                    updateYOffset={y => this.updateYOffset(y)}
                    markTable={() => this.markTable()}
                    setOutputLabels={(row, col, val) => this.setOuputLabels(row, col, val)}
                />
            </div>
        );

        if (!this.props.isThirdStep) {
            return (
                <div>
                    <div style={sideBySide}>
                        <PDFViewer
                            isThirdStep={this.props.isThirdStep}
                            paginationCallback={this.handlePageChange}
                            pdfData={this.state.pdfData}
                            desiredWidth={600}
                            selectedPage={this.props.savedPageNo}
                        />
                    </div>
                </div>
            );     
        } else {
            return (
                <div>
                    <ReferenceMenu />
                </div>
            );     
        }
    }

In my component's render, I try to render several components based on certain conditions.

So, basically, the TablePoisition always stays there, and the PDFViewer and ReferenceMenu renders conditionally.

However, what I see on both conditions is only the TablePosition component.

Is this not supposed to work?

Upvotes: 0

Views: 106

Answers (2)

devserkan
devserkan

Reputation: 17608

As explained since you want to combine two components you should change your render logic. One component will be sit there always and the other one will be rendered conditionally. So, you need to render that last component with the sticky one in the same return. I would do something like this:

renderPDFViewer = () => (
    <div>
        <div style={sideBySide}>
            <PDFViewer
                isThirdStep={this.props.isThirdStep}
                paginationCallback={this.handlePageChange}
                pdfData={this.state.pdfData}
                desiredWidth={600}
                selectedPage={this.props.savedPageNo}
            />
        </div>
    </div>
);

render() {
        const tableStyle = this.getTableStyle();
        const tableSettings = this.getTableSettings();

        return (
            <div>
            <div style={tables}>

                <TablePosition
                    contextMenuOn={true}
                    step={this.props.step}
                    pdfData={this.props.pdfData}
                    tableSettings={tableSettings}
                    tableStyle={tableStyle}
                    fileName={this.state.fileName}
                    tableSize={this.getTableSize()}
                    tableOffset={this.state.tableOffset}
                    desiredWidth={700}
                    updateXOffset={x => this.updateXOffset(x)}
                    updateYOffset={y => this.updateYOffset(y)}
                    markTable={() => this.markTable()}
                    setOutputLabels={(row, col, val) => this.setOuputLabels(row, col, val)}
                />
                </div>

        {
            !this.props.isThirdStep
                ? this.renderPDFViewer()
                : ( <div><ReferenceMenu /></div> )
        }
            </div>
        );
    }

Upvotes: 1

Tyler
Tyler

Reputation: 986

You need to place your conditional renders inside variables or something similar.

var conditionContent1 = null;
var conditionContent2 = null;

if(condition1){
    conditionContent1 = <div>conditional content 1</div>;
}

if(condition2){
    conditionContent2 = <div>conditional content 2</div>;
}

return (
    <div id="wrapper">
        <div>
            content
        </div>
        {conditionContent1}
        {conditionContent2}
    </div>
);

I added a wrapper div; because, I believe render's return doesn't like having multiple root elements.

If the variables are null; then, it won't affect the overall render.

Upvotes: 1

Related Questions