0

I want to show if the value of selected checked button is the same as the answer in the database while rendering the data from the database I have a variable named and which have the value of the correct answer.

Also, I am able to get the value of the selected radio button. I want to render two div on the basis that if the radio value is as same as the correct answer or not but I am not able to understand how to do it.

import React, { Component } from 'react';
import axios from 'axios'
import {Form,Radio,} from 'semantic-ui-react'
import 'semantic-ui-css/semantic.min.css';





export default class QuestionList extends Component {
    constructor(props){
        super(props)
        this.handleOptionChange = this.handleOptionChange.bind(this);
        this.handleFormSubmit = this.handleFormSubmit.bind(this);

        this.state = {questions:[],
          answer:''}

    }

    handleOptionChange(e){
      this.setState({
        answer: e.target.value
      });
    }

    handleFormSubmit (e) {
      e.preventDefault();

      console.log('You have selected:', this.state.answer);
    }


    componentDidMount(){
        axios.get('http://localhost:5000/question/')
        .then(respose =>{
            this.setState({questions:respose.data})
        })
        .catch(error => {
            console.log(error);
        });

    };



    questionList() {

        return this.state.questions.map(currentquestion => {

          return(
            <Form onSubmit ={this.handleFormSubmit}>
        <Form.Field>
         <h3>Q.  {currentquestion.ques}</h3>
          <h6>Correct Answer is {currentquestion.ans} </h6>
        </Form.Field>
        <Form.Field>
          <Radio
            label={currentquestion.options[0]}
            name='radioGroup'
            value ={currentquestion.options[0]}
            checked = {this.state.answer === currentquestion.options[0]}
            onChange={this.handleOptionChange}

          />
        </Form.Field>
        <Form.Field>
          <Radio
            label={currentquestion.options[1]}
            name='radioGroup'
            value ={currentquestion.options[1]}
            checked = {this.state.answer === currentquestion.options[1]}
            onChange={this.handleOptionChange}

          />
        </Form.Field>
        <Form.Field>
          <Radio
            label={currentquestion.options[2]}
            name='radioGroup'
            value = {currentquestion.options[2]}
            checked = {this.state.answer === currentquestion.options[2]}
            onChange={this.handleOptionChange}

          />
        </Form.Field>
        <Form.Field>
          <Radio
            label={currentquestion.options[3]}
            name='radioGroup'
            value={currentquestion.options[3]}
            checked = {this.state.answer === currentquestion.options[3]}
            onChange={this.handleOptionChange}

          />
        </Form.Field>

        <button type ="submit" class="ui button" >Submit Answer</button>
        <hr />

      </Form>

          );
        })
      }



  render() {
    return (
        <div>
        <h2>Questions</h2>
        <hr />
        <hr />
        <p>{ this.questionList() } </p>

      </div>
    )
  }

but when i try to select the radio button I am unable to check them that means i am not able to store anything in answer state.

1
  • try this.state.answer == currentquestion.options[i] instead, with only 2 = Commented Apr 3, 2020 at 13:40

1 Answer 1

1

in semantic-ui the onChange takes two parameters, (e, value), if you console.log value in your handlechange you'll find it there, so this is the value you should put in your state, you can try it inside their playground in the documentation : https://react.semantic-ui.com/collections/form/#shorthand-field-control Hope this helps.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.