Conditional if else list data in react [duplicate]

Question

I have json data and I have on the list. Here I want to use an empty data approval condition.

But I have not succeeded:

   componentDidMount(){
        this.getJson();
    }

 getJson= () => {

        const url = `https://example.com/priceon?ori=${a}&des=${b}`
        fetch(url)
          ....
    };

render() {
    //here I make a condition if the data exists and does not exist
    if (this.state.results == '') {
        return(
        <View>
            <Text style={{fontWeight:'bold',fontSize:16}}>DATA NULL</Text>
        </View>
        );
    } else {
        return (
        <Container style={styles.container}>
                    <List 
                        keyExtractor = {(item, index)=> index.toString()} 
                        dataArray={this.state.results}
                        renderRow={(results) =>
                        <ListItem>
                            <Body>
                                <CardItem>
                                    <Text>{results.tipe} - {results.service}</Text>
                                </CardItem>
                            </Body>
                        </ListItem>
                    }>

      </Container>
    );
      }
    }

How to make the right conditions?

If the data exists then it appears, if it is empty then display null data

norbitrial · Accepted Answer · 2020-05-31 07:17:09Z

2

If the API call returns as an array then you can do this.state.results.length check maybe with additional null check.

Try as the following:

render() {
   <>
      {
          this.state.results && this.state.results.length ?
             <Container style={styles.container}>
                 { /* your code */ }
             </Container>
          :
             <View>
                 <Text style={{fontWeight:'bold',fontSize:16}}>DATA NULL</Text>
             </View>
      }
   </>

Read further about Conditional Rendering. Especially the Inline If with Logical && Operator section.

answered May 31, 2020 at 7:17

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

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

Comments

Harsh Thakkar · Accepted Answer · 2020-05-31 07:46:00Z

0

Here is the code below :)

render() {
//you can use ternary if statement, this is much more better than normal if(s)
return((this.state.results.length)?
    (<View>
        <Text style={{fontWeight:'bold',fontSize:16}}>DATA NULL</Text>
    </View>):
    (<Container style={styles.container}>
                <List 
                    keyExtractor = {(item, index)=> index.toString()} 
                    dataArray={this.state.results}
                    renderRow={(results) =>
                    <ListItem>
                        <Body>
                            <CardItem>
                                <Text>{results.tipe} - {results.service}</Text>
                            </CardItem>
                        </Body>
                    </ListItem>
                }>
  </Container>));
}

answered May 31, 2020 at 7:46

Harsh Thakkar

11 bronze badge

1 Comment

Harry Wardana Over a year ago

Can you correct it again? I copied this error code

Collectives™ on Stack Overflow

Conditional if else list data in react [duplicate]

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related