Conditional rendering on React.js

Question

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?

probably because you only return TablePosition, the second return is never evaluated — Derek Pollard
– Derek Pollard, Commented Jun 29, 2018 at 20:08
Do we just have to put all components for each condition then? — Dawn17
– Dawn17, Commented Jun 29, 2018 at 20:08
what you're trying to do is the equivalent of fn() {return 1;} 1 will ALWAYS be returned — Derek Pollard
– Derek Pollard, Commented Jun 29, 2018 at 20:09
@AravindS, no, the return statements should contain jsx elements, the logic belongs in the method, as it is — Derek Pollard
– Derek Pollard, Commented Jun 29, 2018 at 20:14
@AravindS not without making the code illegible and hacky, again, logic belongs outside of the return — Derek Pollard
– Derek Pollard, Commented Jun 29, 2018 at 20:18

devserkan · Accepted Answer · 2018-06-29 20:42:56Z

1

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>
        );
    }

edited Jun 29, 2018 at 20:42

answered Jun 29, 2018 at 20:26

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

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

5 Comments

Dawn17 Over a year ago

How does !this.props.isThirdStep part work? It gives me an error this.renderPDFView() is not a function`

Derek Pollard Over a year ago

This is a perfect example of why logic belongs outside the return. See: reactjs.org/docs/conditional-rendering.html

devserkan Over a year ago

Though a downvote :) Nevermind. @Dawn17, this is an example of conditional rendering with ternary operators. It is a great way of rendering two things conditionally. If this.props.isThirdStep is false it invokes this.renderPDFView() function, otherwise it renders ReferenceMenu component. If it says there is not a function there might be some typo in your code.

devserkan Over a year ago

It is my typo and fixed it. Code is yours, so do not copy paste it blindly, if there is an error look carefully. I just gave an example here.

devserkan Over a year ago

By the way, how you setup your render logic is totally up to you. Some says "do this like that, others say no, do like this". Do it yourself and see if it suits you. Here is a quote from official documentation: Just like in JavaScript, it is up to you to choose an appropriate style based on what you and your team consider more readable.

Tyler · Accepted Answer · 2018-06-29 20:18:26Z

1

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.

answered Jun 29, 2018 at 20:18

Tyler

1,0161 gold badge13 silver badges28 bronze badges

2 Comments

Derek Pollard Over a year ago

This is probably the best way to do it, aside from maybe extracting away the display into its own component to handle all the shared logic of the individual steps components

Tyler Over a year ago

@Derek Possibly. It depends on the conditional content. Even if the content was abstracted into different components, the overall code here probably wouldn't change. It's just less JSX inside the if-statements.

Collectives™ on Stack Overflow

Conditional rendering on React.js

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related