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

@ViswasMenon I have made 2 state variables gender and gendertext when I check option radio button `this.state.gender` becomes -1 and as we have checked other radio button we type in text in input button so now `this.state.gendertext` equals input box text. Now if `this.state.gender === -1` I want it to be equal to `this.state.gendertext` — , Feb 26 '18 at 04:33
Arent you doing that check inside savedata() above, or is it not working ? — Viswas Menon, Feb 26 '18 at 04:35
I'm also unclear of what your question is. seems very [x-y](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) ish to me. if you want to change state call setState. but really I think you should describe what the functionality should be, not what you think your solution should be — azium, Feb 26 '18 at 04:37
@ViswasMenon No the if statement is not working inside savedata — , Feb 26 '18 at 04:38
@azium I am pushing my data to firebase but the question is not related to that. — , Feb 26 '18 at 04:39
@azium I have made 2 state variables gender and gendertext when I check option radio button this.state.gender becomes -1 and as we have checked other radio button we type in text in input button so now `this.state.gendertext` equals input box text. Now if` this.state.gender === -1` I want it to be equal to `this.state.gendertext` — , Feb 26 '18 at 04:39
@azium I want content of `this.state.gender` to be equal to `this.state.gendertext` only if the other radio button is checked else `this.state.gender` is equal to value of radio button option. — , Feb 26 '18 at 04:42
right..... so call setState! if you want to change state, then you have to call setState — azium, Feb 26 '18 at 04:43
it should can you post what you tried? (update your question with new code) — azium, Feb 26 '18 at 04:47
@fire-man, what does do this piece of code? `newcontent.set` — salman.zare, Feb 26 '18 at 05:01
@salman.zare I am pushing data to database firebase it has nothing to do with the question. It just gets pushed when submit button is clicked — , Feb 26 '18 at 05:06

salman.zare · Accepted Answer · 2018-02-26T06:00:53.660

0

  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>

edited Feb 26 '18 at 06:00

answered Feb 26 '18 at 04:38

salman.zare

649
5
8

what?? are you saying you can only have one key on state? – azium Feb 26 '18 at 04:39
@azium, what's the issue?! – salman.zare Feb 26 '18 at 04:48
@salman.zare Your answer is not working I have made 2 state variables gender and gendertext when I check option radio button this.state.gender becomes -1 and as we have checked other radio button we type in text in input button so now this.state.gendertext equals input box text. Now if` this.state.gender === -1` I want it to be equal to this.state.gendertext – Feb 26 '18 at 05:07
Inside the `savedata ` function. – salman.zare Feb 26 '18 at 05:15
@salman.zare I am getting error expected please see my edited code here https://jsfiddle.net/5L02k7zz/ – Feb 26 '18 at 05:22
ok, change your `onChangeTextBoxGender` and `setGender` functions like above updated code. – salman.zare Feb 26 '18 at 05:23
@salman.zare When I click on radio button other and then when I start typing in input box other radio button gets unchecked why is this happening. It is not working why ? – Feb 26 '18 at 05:46
Change the following line: ` 0)} onChange={this.setGender.bind(this,-1)}/>Other` – salman.zare Feb 26 '18 at 05:50
@salman.zare Why have you used function to setState part in your answer – Feb 26 '18 at 05:54
Refer to https://stackoverflow.com/questions/34687091/can-i-execute-a-function-after-setstate-is-finished-updating – salman.zare Feb 26 '18 at 05:57
@salman.zare I could not understand why did you used function to setState in `onChangeTextBoxGender` – Feb 26 '18 at 05:57
@salman.zare What if we setState of `gender: txt` inside setState without callback will it work? – Feb 26 '18 at 05:59
You right, I updated the code. Initially I used this one for first update the state and then doing another action. But with new changes we don't need it. I update the above code. – salman.zare Feb 26 '18 at 06:01
@salman.zare Can you explain why have you added this line `this.state.gendertext.length >0` – Feb 26 '18 at 06:03
Because we are assigning the `gendertext` to the 'gender', and we need to check if the text is not empty then `checked` the radioButton. – salman.zare Feb 26 '18 at 06:06

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

1 Answers1