CODEWITHSUNDEEP
javascript
XYZ
XYZ

Reputation: 13

How to pass state in react?

I need to get the '+' or '-' result when clicking on submit, but don't know at all how to deal with it . It s my code with result before clicking 'submit'

class App extends React.Component {
  constructor() {
    super();
    this.state = {counter: 0};
    
  }
  
  render() {
    return (
      <div>
        <button onClick={this.increment}>+</button>
        <output>{this.state.counter}</output>
        <button onClick={this.decrement}>-</button>
        <button onClick={this.submit}>submit</button>
      </div>
    );
  }
  
  increment =()=> {
    this.setState({
      //counter: this.state.counter + 1
    })
  }
  
  decrement=()=> {
   
    this.setState({
      //selectedFunction= -1??
    })
  }
  submit=(selectedFunction)=>{this.setState({
      counter: this.state.counter + {selectedFunction}
    })};
}
ReactDOM.render(<App />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Upvotes: 0

Views: 65

Answers (2)

Araz Shamsaddinlouy
Araz Shamsaddinlouy

Reputation: 401

this one should work:

class App extends React.Component {
  constructor() {
    super();
    this.state = {counter: 0, tempCounter: 0};
    this.increment = this.increment.bind(this);
    this.decrement = this.decrement.bind(this);
      this.submit = this.submit.bind(this);
  }

  render() {
    return (
      <div>
        <button onClick={this.increment}>+</button>
        <output>{this.state.counter}</output>
        <button onClick={this.decrement}>-</button>
        <button onClick={this.submit}>submit</button>
      </div>
    );
  }
  submit(){
       const tempCount = this.state.tempCounter;
       this.setState({counter: tempCounter})
  }
  increment() {
    const tempCount = this.state.tempCounter;
    this.setState({
       tempCounter: tempCount + 1 
    });
  }

  decrement() {
    const tempCount = this.state.tempCounter;
    this.setState({
       tempCounter: tempCount - 1 
    });
  }
}
ReactDOM.render(<App />, document.getElementById("app"));

Upvotes: 0

chandanchaudhary
chandanchaudhary

Reputation: 305

You should bind your increment and decrement function inside the constructor and pass just the methods as onClick prop.

class App extends React.Component {
  constructor() {
    super();
    this.state = {counter: 0};
    this.increment = this.increment.bind(this);
    this.decrement = this.decrement.bind(this);
  }

  render() {
    return (
      <div>
        <button onClick={this.increment}>+</button>
        <output>{this.state.counter}</output>
        <button onClick={this.decrement}>-</button>
      </div>
    );
  }

  increment() {
    this.setState(function(prevState){
      return { counter: prevState.counter + 1 }
    });
  }

  decrement() {
    this.setState(function(prevState){
      return { counter: prevState.counter - 1 }
    });
  }
}
ReactDOM.render(<App />, document.getElementById("app"));

Upvotes: 1

Related Questions