Passing state value

ReactJS
1

I am new guy, a beginner one. I am trying to pass state but couldn’t do it. Below is my code, I want inputValue that is inside handleChange to be accessed in the handleSubmit. The text entered in the text box to be accessed in the handleSubmit which is triggered when submit is clicked. Any help would be more than appreciable.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      numOfClicks: 0,
    };
    this.handleClick  = this.handleClick.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handlecheckboxChange = this.handlecheckboxChange.bind(this);
  }
  handleClick = () => {
    this.setState({numOfClicks: this.state.numOfClicks + 1});
  };
  handlecheckboxChange = (evt) => {
    this.setState({genderValue: evt.target.value});
  };
  handleChange = (evt) => {
    this.setState({inputValue: evt.target.value});
  };
  handleSubmit = (inputValue) => {
    
  };
  // handleSubmit(evt) {
  //   // this.setState({formData: data});
  //   console.log(handleChange.props.inputValue);
  // }
  render(){
      return (
        <div>
          <p>
          Enter Text<input type="text" value={this.state.inputValue} onChange={this.handleChange} />
          </p>
          <button onClick={this.handleClick}>Click Me!</button>
          <p>Number of Times Clicked = {this.state.numOfClicks}</p>
          <p>Entered Text = {this.state.inputValue}</p>
          <div>
          <p>Male<input name="gender" type="radio" value="male" onClick={this.handlecheckboxChange} /></p>
          <p>FeMale<input name="gender" type="radio" value="female" onClick={this.handlecheckboxChange} /></p>
          <p>Gender = {this.state.genderValue}</p>
          </div>
          <p><input type="submit" name="submit" onClick={this.handleSubmit} value="submit" /></p>
          <p>Form Data = {this.state.formData}</p>
        </div>
      )
    }
  }
export default App;
2

Hey Saurav,

I’m a beginner myself, so hopefully someone else can confirm, but I think you would have already saved “inputValue” to your state via the handleChange event handler on the input element, therefore you should be able to just rely upon the inputValue within the component’s state.

ie. this.setState({formData: this.state.inputValue});

1 Like
3

Hello @kevin_gilpin,
Thanks for replying.

I did like this with success:

handleSubmit = (handleChange) => {
    this.setState({formData: this.state.inputValue});
    console.log(this.state.inputValue);
  };

This means you are absolutely right. Is there any way I can mark your reply as correct?

Thank you again.

4

Awesome, glad I could help!

Btw you don’t need handleChange as the parameter, as you’re not using it. Also, since you’re passing handleSubmit as a click handler, the argument passed to handleSubmit when it gets called would be the event anyhow.

To go a step further, it is generally recommended that you use a form instead of the div, and assign the handleSubmit to the onSubmit event via the form, instead of the onClick of the button.
See example: http://jsfiddle.net/ferahl/b125o4z0/
As some browsers may not trigger the button’s onClick if the user presses the enter key of their keyboard.