CODEWITHSUNDEEP
reactjs
GoyaKing
GoyaKing

Reputation: 99

React setState reusable

So I'm trying to create a function that can be used to set state on different key values passed in on the event. When I log the state it still in its initial state with empty strings on each key. I tried with and without [] on the key value in the setState. Thank you 

 constructor(props){
    super(props)
    this.state={
        Day:'',
        Open:'',
        Close:''
    }
  }

  logState(){
    console.log(this.state);
  }
  pushTime(event){
    event.preventDefault();
    console.log('Clicked ', event.target.id, event.target.value);
    var id = event.target.id
    console.log(typeof id);
    this.setState({[event.target.id]:event.target.name})
  }

Upvotes: 1

Views: 747

Answers (3)

Mayank Shukla
Mayank Shukla

Reputation: 104379

Addition to @Shubham's answer, u can set the state like this also:

class App extends React.Component {
  constructor(props){
    super(props)
    this.state={
        Day:false,
        Open:false,
        Close:true
    }
      this.pushTime = this.pushTime.bind(this);
  }

  logState(){
    console.log(this.state);
  }

  pushTime(event){
    let state = this.state;
    console.log('Clicked ', event.target.id, event.target.value);
    state[event.target.id]=!state[event.target.id];
    this.setState({state});
  }

  render() {
    return (
       <div>
         <input type='checkbox' id='Day' name='Day' onClick={this.pushTime} checked={this.state.Day}/>
         <input type='checkbox' id='Open' name='Open' onClick={this.pushTime} checked={this.state.Open}/>
         <input type='checkbox' id='Close' name='Close' onClick={this.pushTime} checked={this.state.Close}/>
       </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>

check the jsfiddle: https://jsfiddle.net/vhavwcbh/

Upvotes: 1

GoyaKing
GoyaKing

Reputation: 99

  pushTime(event){
    event.preventDefault();
    var stateObject=function(){
      let returnObj={}
      returnObj[this.target.id]=this.target.value
      return returnObj
    }.bind(event)();

    this.setState(stateObject)
  }

Upvotes: 0

Shubham Khatri
Shubham Khatri

Reputation: 281706

You need to bind the pushTime function so that it can access the state. For that you can make use of arrow function or bind it in constructor. Also setState takes time to mutate the state so you must call the logState function inside the setState callback like the below example

class App extends React.Component {
  constructor(props){
    super(props)
    this.state={
        Day:'',
        Open:'',
        Close:''
    }
  }

  logState(){
    console.log(this.state);
  }
  pushTime = (event) =>{
    event.preventDefault();
    console.log('Clicked ', event.target.id, event.target.value);
    var id = event.target.id
    this.setState({[id]:event.target.name}, function() {
      this.logState();
    })
  }
  render() {
    return (
      <div>
      <input type='checkbox' id='Day' name='Day' onClick={this.pushTime} value='Day'/>
      <input type='checkbox' id='Open' name='Open' value='Open' onClick={this.pushTime}/>
      <input type='checkbox' id='Close' name='Close' value='Close' onClick={this.pushTime}/>
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>

Upvotes: 2

Related Questions