Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState, useEffect } from "react";
import Option from "../option/Option";

const Question = (props) => {

    // get props
    const { question, backendVars } = props;

    // init States 
    const [input, setInput] = useState(question.answer);

    /**
     * Update question answer
     * @param {*} value
     */
    const handleAnswer = (value) => {
        setInput(value);
        question.answer = value;
    }

    /**
     * componentDidMount
     */
    useEffect(() => {
        setInput(question.answer);
    }, [question]);



    return (
        <div className="col-md-12 col-sm-12 col-xs-12 np-padding">
            <div className="form-group" >
                <h6>{backendVars.LBL_QUESTION} #{question.position + 1}</h6>
                <div
                    dangerouslySetInnerHTML={{ __html: question.text }}
                    className="title"
                />
            </div>
            {question.type == 'open' &&
                <div className="form-group">
                    {question.multiline == 1 ? (
                        <textarea
                            className="form-control"
                            rows="5"
                            value={input}
                            maxLength={question.maxlength}
                            name={question.slug_question}
                            onChange={e => handleAnswer(e.target.value)}
                        />
                    ) : (
                        <input
                            type="text"
                            className="form-control"
                            value={input}
                            maxLength={question.maxlength}
                            name={question.slug_question}
                            onChange={e => handleAnswer(e.target.value)}
                        />
                    )}
                </div>
            }
            {question.type == 'rating-range' &&
                <ul className="ratin-range">
                    {[...Array(parseInt(question.range))].map((x, i) => {
                        return (
                            <li>
                                <div className="checkbox"
                                    key={i}>
                                    <input
                                        type="radio"
                                        checked={input == i + 1}
                                        name={question.slug_question}
                                        value={i + 1}
                                        onChange={e => handleAnswer(i + 1)}
                                    />
                                    <div className="option">
                                        {i + 1}
                                    </div>
                                </div>
                            </li>
                        )
                    })}
                </ul>
            }
            {(question.type == 'simple' || question.type == 'rating-open' || question.type == 'multiple') &&
                <div className="form-group">
                    {question.options.length > 0 &&
                        <Option question={question} />
                    }
                </div>
            }
        </div>
    )
}

export default Question;