Conditional rendering react native :only else part is working

Question

I've done a conditional rendering statement within react.The condition that I'm checking is based on the server response. If the condition is met then I've to render some UI components otherwise a different UI. So the problem is what ever I'm getting from server, only the else portion is working.I've double checked the response also.

updated code

export default class ViewStatus extends Component {
  constructor(props) {
        super(props);
        this.initialState = {
        progressData: [],
        };
        this.state = this.initialState;
    }
    componentWillMount(){
       fetch('http://192.168.1.2:3000/api/progress',{
         method:'POST',
         headers:{
           'Accept': 'application/json',
           'Content-Type':'application/json'
         },
         body:JSON.stringify({
           work_type:this.props.work_type
         })
       })
      .then(response => response.json())
      .then((responseData) => {
         this.setState({
      progressData:responseData[0]
      });
    });
  }
render() {
const isResponseData = this.state.progressData == '1' ? this.renderDone() : this.renderInProgress()
 console.log(this.state.progressData);
  return(
     <View>
        {isResponseData}
      </View>
    );
  }
  renderInProgress(){
    return(
        <View>
          <Text>In Progress</Text>
          <Text>Worker will approach you within 24 hrs.</Text>
       </View>
     );
  }
  renderDone(){
    return(
       <View>
        <Text>Successfull</Text>
        <Text>Are you satisfied with the work .If yes please mark done.</Text>
       </View>
     );
  }

Can you check what you're getting from the server? Have a breakpoint or console.log there — Ajay Gaur
– Ajay Gaur, Commented Oct 17, 2018 at 6:34
first check the type of this.state.progressData value in console, if its integer then use === 1 or if its string use === '1'. or if values will be 0 or 1 only then no need to use compare operator, u can directly apply. (this.state.progressData)? 'true case' : 'false case'; — Vivek Chaudhari
– Vivek Chaudhari, Commented Oct 17, 2018 at 6:40
Yes I consoled the progressData within render.I'm getting an empty array initially but then I'm getting response.Why like that please do check this i.sstatic.net/p7Xgi.png . Also updated my code above — Anu
– Anu, Commented Oct 17, 2018 at 6:41
progressData has a member "status", shouldn't you check progressData.status? — Alex G
– Alex G, Commented Oct 17, 2018 at 7:06

Hemadri Dasari · Accepted Answer · 2018-10-17 09:33:21Z

1

You need to call responseData[0].status to get the value from API.

API calls should happen in componentDidMount only

componentWillMount is deprecated so forget about this method

Just use ternary operator to render content instead of multiple functions.

Try with below code.

export default class ViewStatus extends Component {
  constructor(props) {
        super(props);
        this.state = {progressData: ""};
    }
    componentDidMount(){
       fetch('http://192.168.1.2:3000/api/progress',{
         method:'POST',
         headers:{
           'Accept': 'application/json',
           'Content-Type':'application/json'
         },
         body:JSON.stringify({
           work_type:this.props.work_type
         })
       })
      .then(response => response.json())
      .then(responseData => {
         this.setState({
      progressData:responseData[0].status
      });
    });
  }
render() {
const { progressData }= this.state;
  return(
     <View>
        {progressData == "1" &&
         (<View><Text>Successfull</Text>
        <Text>Are you satisfied with the work .If yes please mark done.</Text></View>)}
    {progressData == "2" &&
         (<View><Text>Successfull</Text>
        <Text>Are you satisfied with the work .If yes please mark done.</Text></View>)}
         {progressData == "" &&(<View><Text>In Progress</Text>
          <Text>Worker will approach you within 24 hrs.</Text></View>)}
      </View>
    );
  }

}

edited Oct 17, 2018 at 9:33

answered Oct 17, 2018 at 8:14

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Anu Over a year ago

Yes tried this code but nothing is rendered.I have a doubt , is there any problem in setting the state as array in my code? I will explain you clearly I will be directing to this screen when clicking on a button in the previous page.So how do I manage the fetching here in this page ? Should I use ComponentDidMount for that?Because when I consoled response from server the initial response will be empty array. Then only I will be getting the response.So how do I manage that here?Because I think when checking the condition it will take this empty array.Please guide me..

Hemadri Dasari Over a year ago

@anu what you get in the api response? an array or an object with status key? do console log and share the api response

Hemadri Dasari Over a year ago

@anu looks like you are getting object

Anu Over a year ago

This is the response I'm getting when I consoled before i.sstatic.net/alffv.png

Anu Over a year ago

Wow..great..It worked thank you so much...How do I check one more condition here? That means now I'm checking whether status == 1 or the else. How to check else if condition?Because I'm trying to render some UI.In the case of Pending , Inprogress and finally done

|

Collectives™ on Stack Overflow

Conditional rendering react native :only else part is working

1 Answer 1

15 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related