react-interactive-quiz-component/src/Congratulations.js

Simple Interactive Quiz component

import React, { Component } from 'react';
import './index.css';

class Congratulations extends Component {
    constructor(props) {
        super(props);
        this.LoadContact = this.LoadContact.bind(this);
        this.isContact=false;
        this.isReview=true;
        this.reviewAnswers = this.props.reviewAnswers.map(function(reviewAnswer) {
            return (
                <tr> 
                    <td>
                        {reviewAnswer.question}
                    </td>
                    {reviewAnswer.status == true &&
                    <td className="correctGreen">
                        {reviewAnswer.selectedoption}
                    </td>
                    }
                    {reviewAnswer.status == false &&
                    <td className="wrongRed">
                        {reviewAnswer.selectedoption}
                    </td>
                    }
                    <td>
                        {reviewAnswer.answer}
                    </td>
                </tr>
            );
         });
    }
    
    LoadContact(e){
        this.isContact = true;
        this.isReview = false;
        this.forceUpdate();
    }
    render() {
        return (
            <div>
                <h1>Congratulations!!!!!!</h1> 
                <a className="btn btn-default inline" href="#" role="button" onClick={this.LoadContact}>Contact Us</a>
                <br/> <br/>
                { this.isReview == true &&
                
                <table>
                    <tr>
                        <th>
                            Question
                            </th>
                            <th>
                                Your Answer
                                </th>
                                <th>
                                    Correct Answer
                                    </th>
                                    </tr>
                                    {this.reviewAnswers}
                                    </table>
                                    }
                                    {
                                        this.isContact == true &&
                                        
                                        <span class="label label-info">Please contact {this.props.email} for any queries</span>
                                        
                                    }
            </div>
        );
    }
}

export default Congratulations;