CODEWITHSUNDEEP
javascripthtmlreactjs
Alex Bailey
Alex Bailey

Reputation: 83

If-Else State Reactjs

I am trying to get an if-else statement based on a state value. My code is set up in a way to change the state whenever and to whatever a <select> element is changed to.

I am trying to do something like this:

if(this.state{value:} == "string")
{
   //Do this
}

However seem to not be able to correctly do this. What might be a better suggestion or the correct way to do this?

Actual code I am trying :

  7     this.state = {value: 'empty'};
  8   }
  9   SelectChange = (event) => {
 10     this.setState({value: event.target.value});
 11     if(this.state[value] == "string" )
 12     {
 13       console.log("string");
 14     }
 15   }
 16   /*}
 17   AddListener = (event) => {
 18     var id = event.target.id;
 19     var selectElements = document.getElementById(id);
 20     var stringSpec = id.substr(10, 11);
 21     var specLeng = "specifySection" + stringSpec;
 22     //console.log("This Id: " + id + "NumString: |" + stringSpec + "| New Id: "     + specLeng);*/
 23     /*selectElements.addEventListener("change", function(){
 24       moreInfo(id, specLeng);
 25     }, false); */
 26   render (){
 27     const {SelectChange} = this;
 28     const {value} = this.state;
 29     return (
 30       <div>
 31         <div>
 32           <label><strong>New Field </strong></label>
 33           <div id="remove-" className="remove" style={{display: "inline", visibi    lity: "hidden"}}>
 34            <label> --Remove </label> <input type="checkbox" id="removeBox" class    Name="rmvCheckbox" />
 35             <br />
 36           </div>
 37           <label> Name: </label>
 38           <input id="name-" className="name" type="text" name="name" /> <br />
 39           <label> Description: </label>
 40           <input id="description-" className="description" name="description" />     <br />
 41           <label> Datatype: </label>
 42           <select value={value} onChange={SelectChange} id={`selectData-${this.p    rops.number}`} className="selectData" name="selectData" /*onClick={AddListener}*    />

Upvotes: 2

Views: 92

Answers (3)

tam.dangc
tam.dangc

Reputation: 2032

this.setState({}) is a async function. So when you use this.state.value in if condition right after this function. The value is not set yet. So you can you the value passed from the parameter 

if(event.target.value === "string")

Or you can use a callback function

this.setState({value: event.target.value}, () => {
  if(this.state.value === 'string') {
    // Do what you want here
  }
})

Upvotes: 4

tam.dangc
tam.dangc

Reputation: 2032

You did a wrong syntax. If the value is dynamic. It should be

if(this.state[value] == "string")
{
   //Do this
}

Upvotes: 0

sathish kumar
sathish kumar

Reputation: 1507

try this

if(this.state.value == "string"){
 //do this
}

option 2

this.state.value == "string" ? handleTrue() : handleFalse();

option 3 .. if you want to check just true 

this.state.value && handleTrueLogic();

Upvotes: 0

Related Questions