Conditional rendering after fetch in react native

Question

How to do conditional rendering after fetch in react native?I wan't to render components after 1.Successful fetch with the responseData 2.Network request fails 3.If there is empty responseData returned from server

For now I'm displaying only the successful result.I want to display the failure case also.How do I render Text component after unsuccessful fetch.Following is my code

  onPressSubmit() {

    fetch("xxxx", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        url: this.state.url
      })
    })
     .then((response) => response.json())
    .then((responseData) =>
    {
            this.setState({
            res:responseData.message,
            showLoading: false
                    }, () => console.log(this.state.res));
        }).catch((error) => {
      console.error(error);
    });
  }
  renderArticle(){
      const {title} = this.state.res;
      const {image} = this.state.res;
      const {text} = this.state.res;
      const {id} = this.state.res;
      const {author} =this.state.res;
      const {html} = this.state.res;


              return (
           <TouchableOpacity 
            onPress={() => Actions.addNewarticle({heading:title, authorname:author, description:text, htmlcon:html})}
          >
            <CardSection>
              <View style={{ flexDirection: "row" }}>
                <Image
                  source={{ uri:image }}
                  style={styles.thumbnail_style}
                />
                <Text style={styles.textStyle}>{title}</Text>
              </View>
            </CardSection>
          </TouchableOpacity>
          ); 
  }
render(){
return(
 <View>
{this.renderArticle()}
 </View>
);
}

ChintaN -Maddy- Ramani · Accepted Answer · 2018-08-10 06:37:16Z

2

Create renderNetworkFailure method in which you can display whatever you want. Into render method. check your response data is available or not? I have check blank string.

render(){
const isResponseData = (this.state.res == '') ? this.renderNetworkFailure() : this.renderArticle()
return(
 <View>
{isResponseData}
 </View>
);

answered Aug 10, 2018 at 6:37

ChintaN -Maddy- Ramani

5,1741 gold badge30 silver badges49 bronze badges

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

4 Comments

Anu Over a year ago

Can I give one more condition that if responseData is empty?

ChintaN -Maddy- Ramani Over a year ago

Why not? It's up to your requirement.

Anu Over a year ago

So how would that be? Could you please check this

const isResponseData = (this.state.res == '') ? this.renderNetworkFailure() : this.renderArticle() :this.renderEmptyData()

ChintaN -Maddy- Ramani Over a year ago

No its an ternary operator. its like if else. ? is if and : is else

Harikrishnan S · Accepted Answer · 2018-08-10 07:22:18Z

0

I think more precisely this is how your answer would look like, and if you want to show for the network failure as well then you must keep a state variable for it also.(Im also a beginner in react-native please correct if there is anything wrong)

render(){
return(
<View>
{(this.state.err)?this.networkFailure():({this.state.res.length? this.renderArticle():this.renderNothing()})}
</View>
)
}

answered Aug 10, 2018 at 7:22

Harikrishnan S

1241 gold badge2 silver badges13 bronze badges

Collectives™ on Stack Overflow

Conditional rendering after fetch in react native

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related