Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 467 | | 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
468 geraldo 14 
     * @param {*} value
456 geraldo 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 
                        {question.type == 'multiple' &&
466 geraldo 37 
                            <InputMultiple
38 
                                option={opt}
39 
                                question={question} />
321 geraldo 40 
                        }
41 
                        {question.type != 'multiple' &&
42 
                            <input
43 
                                type="radio"
328 geraldo 44 
                                name={`${opt.slug_question}`}
342 geraldo 45 
                                value={opt.slug_option}
456 geraldo 46 
                                checked={input == opt.slug_option}
466 geraldo 47 
                                onChange={() => handleAnswer(opt.slug_option)}
342 geraldo 48 
                            />
321 geraldo 49 
                        }
319 geraldo 50 
                        <div
51 
                            dangerouslySetInnerHTML={{ __html: opt.text }}
52 
                            className="option"
53 
                        />
54 
                    </div>
55 
                )
56 
            })}
306 geraldo 57 
        </div>
58 
    )
59 
}
60 
 
61 
export default Option;