CODEWITHSUNDEEP
javascriptfunctionreactjsradio-buttonjsx
Irfan
Irfan

Reputation: 81

radio buttons in react, ignore null value

so i'm developing a personality quiz app using one of the tutorials i found on the internet //mitchgavan.com/react-quiz/, I have a quizQuestions.js file for api where i fetch the answer and the question from, like so

{
question: "I am task oriented in order to achieve certain goals",
answers: [
  {
    type: "Brown",
    content: "Hell Ya!"
  },
  {
    type: " ",
    content: "Nah"
  }
]
},

it has type and content, so this is the initial state of the app, every time the user click on Hell YA button it will increment that type +1, for example Brown: 1 etc.. but the problem is, when user select Nah it will give me this :null , I have a AnswerOption.js component like so

 function AnswerOption(props) {
  return (
    <AnswerOptionLi>
      <Input
        checked={props.answerType === props.answer}
        id={props.answerType}
        value={props.answerType}
        disabled={props.answer}
        onChange={props.onAnswerSelected}
      />
      <Label className="radioCustomLabel" htmlFor={props.answerType}>
        {props.answerContent}
      </Label>
    </AnswerOptionLi>
  );
}


AnswerOption.PropTypes = {
  answerType: PropTypes.string.isRequired,
  answerContent: PropTypes.string.isRequired,
  answer: PropTypes.string.isRequired,
  onAnswerSelected: PropTypes.func.isRequired
};

and my setUserAnswer function like so

setUserAnswer(answer) {
    const updatedAnswersCount = update(this.state.answersCount, {
      [answer]: {$apply: (currentValue) => currentValue + 1}
    });
    this.setState({
      answersCount: updatedAnswersCount,
      answer: answer
    });
}

my question is, how can i let react ignore that white space, so when user click Nah it will not do anything with it, and if there is different approach to the problem i will be gladly accept it, thanks in advance.

Upvotes: 1

Views: 780

Answers (1)

Vivek Doshi
Vivek Doshi

Reputation: 58593

Simple solution to your problem is to check if answer is empty :

if(answer.trim()) {

    const updatedAnswersCount = update(this.state.answersCount, {
        [answer]: {$apply: (currentValue) => currentValue + 1}
    });
    this.setState({
      answersCount: updatedAnswersCount,
      answer: answer
    });

}

Upvotes: 1

Related Questions