How to get data using two different state variables in ReactJS?

Question

I have made 4 radio buttons and one input box for option:other radio button(see screenshot). When I check other radio button and enter the value in input box then this.state.gender becomes -1 and this.state.gendertext equals to the text entered in input box. So I want to do this.state.gender = this.state.gendertext if and only if other radio button is checked otherwise this.state.gender equals to radio button option value and this.state.gendertext = ''

Note: -1 is used as an identifier for last radio button option.

contactform.js:

import React, { Component } from 'react';

class ContactForm extends Component {
  constructor(props){
    super(props);
    this.state = {
        gender:'',
      gendertext:''

    };
  }

setGender(checkedValue){
    console.log(checkedValue);
    this.setState({
        gender:checkedValue
    })
  }

  onChangeTextBoxGender(event){
  this.setState({gendertext: event.target.value})
  }

savedata(age, gender, health, name, email, info, fitness){
        let newcontent = contentref.push();

      if(this.state.gender === -1){
        this.setState({
          gender:this.state.gendertext
        })
      }

        newcontent.set({

            gender:this.state.gender,
        gendertext:this.state.gendertext

        });
  }
 render() {

    return (
      <div>

        <div id="center">
          <form>
<div id="gender">
              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <h4>What is your gender?</h4>  
                </div>
              </div>

              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <div className="radio">
                    <label><input type="radio" name="gender" checked={(this.state.gender === 'Female')} onChange={this.setGender.bind(this,'Female')}/> Female</label>
                  </div>
                </div>
              </div>
              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <div className="radio">
                    <label><input type="radio" name="gender" checked={(this.state.gender === 'Male')} onChange={this.setGender.bind(this,'Male')}/> Male</label>
                  </div>
                </div>
              </div>
              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <div className="radio">
                    <label><input type="radio" name="gender" checked={(this.state.gender === 'Prefer not to say')} onChange={this.setGender.bind(this,'Prefer not to say')}/> Prefer not to say</label>
                  </div>
                </div>
              </div>

              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <div className="radio">
                    <label><input type="radio" name="gender" checked={(this.state.gender === -1)} onChange={this.setGender.bind(this,-1)}/>Other</label>
                    <input type="text" class="form-inline" id="other1" value={this.state.gendertext} onChange={this.onChangeTextBoxGender.bind(this)}/>
                  </div>
                </div>
              </div>
            </div>
 </form>
        </div>

      </div>
    );
  }
}

export default ContactForm;

Screenshot: here

Answer 1

  onChangeTextBoxGender(event){
    const txt=event.target.value;
    this.setState({
      gendertext: txt,
        gender: txt
    })
  }

And,

  setGender(checkedValue){
    console.log(checkedValue);
    this.setState({
      gender:checkedValue,
      gendertext:''
    })
  }

And change the following line:

<label><input type="radio" name="gender" checked={(this.state.gender === -1 || this.state.gendertext.length >0)} onChange={this.setGender.bind(this,-1)}/>Other</label>