Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 465 | Rev 467 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
456 geraldo 1 
import React, { useState, useEffect } from "react";
466 geraldo 2 
import InputMultiple from "./input-multiple/InputMultiple";
306 geraldo 3 
 
4 
const Option = (props) => {
315 geraldo 5 
 
306 geraldo 6 
    // get props
456 geraldo 7 
    const { question } = props;
306 geraldo 8 
 
456 geraldo 9 
    // init States
10 
    const [input, setInput] = useState(question.answer);
11 
 
12 
    /**
13 
     * Update question answer
14 
     * @param {*} answer
15 
     */
466 geraldo 16 
    const handleAnswer = (value) => {
456 geraldo 17 
        setInput(value);
18 
        question.answer = value;
19 
    }
20 
 
21 
 
22 
    /**
459 geraldo 23 
     * componentDidMount
24 
     */
25 
    useEffect(() => {
26 
        setInput(question.answer);
27 
    }, [question]);
28 
 
29 
 
306 geraldo 30 
    return (
31 
        <div>
319 geraldo 32 
            {question.options.map((opt, key) => {
33 
                return (
320 geraldo 34 
                    <div className="checkbox"
35 
                        key={key}>
321 geraldo 36 
 
37 
                        {question.type == 'multiple' &&
38 
 
466 geraldo 39 
                            <InputMultiple
40 
                                option={opt}
41 
                                question={question} />
321 geraldo 42 
                        }
43 
                        {question.type != 'multiple' &&
44 
                            <input
45 
                                type="radio"
328 geraldo 46 
                                name={`${opt.slug_question}`}
342 geraldo 47 
                                value={opt.slug_option}
456 geraldo 48 
                                checked={input == opt.slug_option}
466 geraldo 49 
                                onChange={() => handleAnswer(opt.slug_option)}
342 geraldo 50 
                            />
321 geraldo 51 
                        }
319 geraldo 52 
                        <div
53 
                            dangerouslySetInnerHTML={{ __html: opt.text }}
54 
                            className="option"
55 
                        />
56 
                    </div>
57 
                )
58 
            })}
306 geraldo 59 
        </div>
60 
 
61 
    )
62 
}
63 
 
64 
export default Option;