Wisselen tussen vraag types. JavaScript in React.

Binnen het dashboard dat wij maken voor ons platform voor The Imagineers gaat er een popup scherm komen waarin een nieuwe vraag aangemaakt kan worden voor het ontwerpatelier. Hierbij moet er een keuze gemaakt kunnen worden tussen het aanmaken van een open vraag of een meerkeuze vraag. In ons design hebben wij dit gedaan door het maken van een keuze in een dropdown menu.

Afhankelijk van welk type vraag je wil aanmaken moeten de invul velden binnen de body van de popup omgewisseld worden. Hiervoor heb ik twee nieuwe functies aangemaakt met de invul velden voor beide vraag types die ik vervolgens importeer naar de pagina met de popup.

Samen met Richard heb ik de functies gemaakt die dit laten werken. Als eerst hebben we een state aangemaakt voor de value van het dropdown menu die aangepast word door het mee te geven op een onChange.

const [value, setValue] = useState(1);

function QuestionValue(e) {

    setValue(e.target.value);        

}

<select className="form-control" onChange={QuestionValue} value={value}>

    <option value="1">Open vraag</option>

    <option value="2">Meerkeuze vraag</option>

</select>

Hierdoor past de state van 'value' aan op basis van het type vraag dat geselecteerd wordt. Nu moeten we er nog voor zorgen dat op basis van deze state het component word geplaatst met de invulvelden voor de twee vraagtypes. Dit heb ik gedaan met een switch die checkt welke waarde 'value' heeft en op basis van die waarde het OpenQuestion of MultipleChoiceQuestion component returnt.

function addQuestion() {

    switch (value) {

        case "1":

            return <OpenQuestion/>

        case "2":

            return <MultipleChoiceQuestion />

        default:

            return <OpenQuestion />

    }

}

Nu hoef ik alleen maar de addQuestion function in de body van mijn popup te zetten en dan zijn we klaar.

Bedankt voor de hulp hè Richard.