boutons radio en réaction, ignorer la valeur nulle

Question

donc je développe une application de quiz de la personnalité en utilisant l'un des tutoriels que j'ai trouvé sur Internet //mitchgavan.com/react-quiz/, j'ai un fichier quizQuestions.js pour api où je vais chercher la réponse et la question de, comme si

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

il a le type et le contenu, donc this is l'état initial de l'application, chaque fois que l'utilisateur clique sur le bouton enfer Yat-il incrémente ce type +1 , par exemple Brown: 1 etc .. mais le problème est, quand l'utilisateur sélectionne Nah il me donnera this :null, j'ai un composant AnswerOption.js comme si

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 
}; 

et ma fonction setUserAnswer comme si

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

ma question est, comment puis-je laisser réagir ignorer cet espace blanc, de sorte que lorsque l'utilisateur clique Nah, il ne fera rien avec elle, et s'il y a une approche différente au problème je serai heureux de l'accepter, merci d'avance.

Answer 1

solution simple à votre problème est de vérifier si la réponse est vide:

if(answer.trim()) { 

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

}