Variable value is not passing in a function

Question

Hello I am new to React JS. I am facing an issue regarding a variable value is not passing to a function.

Here is my code.

class Main extends React.Component{

  state = {
    setType : ""
  }
  
  
  getType(getValue){
    let type = ''
    
    if(getValue === 'win'){
      type = 'win'
    }
    
    else if(getValue === 'lose'){
      type = 'lose'
    }
    
    else {
      type = ""
    }
    
    return type
  }
  
  
  componentDidMount(){
  let type = this.getType('win')
    this.setState({
      setType : type
    })
    
    if(this.props.match.path === '/win'){ 
        this.setState({
          setType : 'win'
        })
    }
    
    if(this.props.match.path === '/lose'){ 
        this.setState({
          setType : 'lose'
        })
    }
  }
  
  this.props.detail(this.state.setType)

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

If I write this.props.detail(type) instead of this.props.detail(this.state.setType)

then it works fine. also I want to set setType value on url Hit. so that if matching url hits, then it's state value also changes and pass to this.props.detail()

Any help would be appreciated.

aravind_reddy · Answer 1 · 2018-06-22T06:42:26.000

1

this.setState is a asynchronous call .By the time your program control gets to this.props.detail() the setState might not have been completed. so your this.state.setType might not have been updated with the new value. that is why your type is having the correct value but your this.state.setType isn't.

Edit

set state like this:

this.setState({
      setType : type
    }, () => {
        this.props.detail(this.state.setType)
    })

edited Jun 22 '18 at 06:42

answered Jun 22 '18 at 06:37

aravind_reddy

5,236
4
23
39

thank you for your time and answer. How can I solve this issue ? I am totally new to React JS. – Brijesh Patel Jun 22 '18 at 06:40

score 0 · Answer 2 · answered Jun 22 '18 at 06:37

setState is a async function. There are changes that when you are calling detail function, that time state are not updated and you have old value in state.

Please write clear and update state once, and do operation on callback.

Example

componentDidMount(){
  let type = this.getType('win')

    if(this.props.match.path === '/win'){ 
        type = 'win'
    }

    if(this.props.match.path === '/lose'){ 
        type = 'lose'
    }

    this.setState({
      setType : type
    }, () => {
        this.props.detail(this.state.setType)
    })
  }

score 0 · Answer 3 · answered Jun 22 '18 at 06:40

Two things that you need to consider while implementing the above

componentDidMount is only called once when the component mounts and not on subsequent re-renders
setState doesn't update the state immediately and is asynchronous

So in your case you would need to use componentWillReceiveProps/componentDidUpdate to update state on match prop change and second pass back value to detail in setState callback or a stored value which is being set to state.

class Main extends React.Component{

  state = {
    setType : ""
  }
  
  
  getType(getValue){
    let type = ''
    
    if(getValue === 'win'){
      type = 'win'
    }
    
    else if(getValue === 'lose'){
      type = 'lose'
    }
    
    else {
      type = ""
    }
    
    return type
  }
  
  
componentDidMount(){
    let type = this.getType('win')
    this.setState({
      setType : type
    })
    const newState = type;
    if(this.props.match.path === '/win'){ 
        newState = 'win'
    }
    
    if(this.props.match.path === '/lose'){ 
        newState = 'lose'
    }
    this.setState({setType: newState});
    this.props.detail(newState)
  }
  

componentDidUpdate(prevProps){
        if(this.props.match.path !== prevProps.match.path) {
            const newState = this.state.setType;
            if(this.props.match.path === '/win'){ 
                newState = 'win'
            }

            if(this.props.match.path === '/lose'){ 
                newState = 'lose'
            }
        }    
        this.setState({setType: newState}, () => {
            this.props.detail(this.state.setType)
        });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Variable value is not passing in a function

3 Answers3

Example