Nothing is rendering when using context api

Question

return (
            <div className="container-fluid" style={{ marginTop: '72px' }}>
                {/* {button}
                <div className="Cards">{successCards}</div>
                <Modal show={this.state.calendar} modalClosed={this.closeCalendar}>
                    {showCalendar}
                </Modal> */}
                <CalenderContext.Consumer>
                    {context=>{
                        if(context.result.length){
                            context.result.map((successCard) => {
                                return (
                                    <Card
                                        key={successCard.fileName}
                                        image={successCard.imageUrl}
                                        payerName={successCard.result.payer.payerName}
                                        subscriberName={successCard.result.subscriberName.subscriberName}
                                        subscriberId={successCard.result.subscriberId.subscriberName}
                                    />
                                );
                            });
                        }
                    }}
                </CalenderContext.Consumer>
            </div>
        );

I am getting context properly as an array. everything is fine but nothing is rendered. Can anyone help to resolve the issue.

Saud Anjum · Accepted Answer · 2020-09-08 10:28:34Z

Solved the proble by using react Fragment.

<CalenderContext.Consumer>
                    {context=>(
                        <Fragment>
                            {context.result.map((successCard) => {
                                return (
                                    <Card
                                        key={successCard.fileName}
                                        image={successCard.imageUrl}
                                        payerName={successCard.result.payer.payerName}
                                        subscriberName={successCard.result.subscriberName.subscriberName}
                                        subscriberId={successCard.result.subscriberId.subscriberName}
                                    />
                                );
                            })}
                        </Fragment>
                    )}
                </CalenderContext.Consumer>

Thanks.

Collectives™ on Stack Overflow

Nothing is rendering when using context api

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related