execute content in the if statement inside render

Question

I want to execute all lines inside if statement but I can't

this is my code

import React, { Component } from 'react';
import { Text, View } from 'react-native';
class test extends Component {
  constructor() {
    super();
    this.state = { data: [] };
  }
  testFunction = () => {
    return (
      <View>
        <Text>Anything</Text>
      </View>
    );
  };

  render() {
    return (
      <View>{data.length > 0 ? <Text>Hi</Text> : this.testFunction() <Text>Hello</Text>}</View>
    );
  }
}
export default test;

I want to execute (this.testFunction()) and (<Text>Hello</Text>)

thank you

`import React, { Component } from 'react'; import { Text, View} from 'react-native'; class test extends Component { constructor() { super(); this.state = { data: [], }} testFunction = () => { return ( Anything ) }render() { return ( {data.length > 0 ? Hi : this.testFunction() Hello } );} } export default test;` — Ahmad Abo Zaid, Oct 03 '18 at 10:15

score 1 · Answer 1 · answered Oct 03 '18 at 10:10

You can do that this way:

render() {
  //Is data initialized?
  if (data.length > 0) 
    return (
      <Text>Hi</Text>
    )
  else 
    return (
      {this.testFunction()}
      <Text>Hello</Text>
    )
    
}

But there are better ways. For example, in this way you keep your render function cleaner:

conditionalRender() {
  //Is data initialized?
  if (data.length > 0) 
    return (<Text>Hi</Text>)
  else 
    return (
      {this.testFunction()}
      <Text>Hello</Text>
    )  
}


render() {
  return (
    {this.conditionalRender)}
  )
}

Chandini · Answer 2 · 2018-10-03T10:33:31.560

0

You can modify your functions such that they return the component.

 condition1 () {
  // do something 
  return ( <FlatList
    data={[{key: 'a'}, {key: 'b'}]}
    renderItem={({item}) => <Text>{item.key}</Text>}
  />);
 }

 condition2 () {
  // do something 
  return ( <Text>Hello</Text>);
 }

And call that in the render

render() {
 return (
  <View> { data.length > 0 ? this.condition1() : this.condition2()} </View>
)}

edited Oct 03 '18 at 10:33

answered Oct 03 '18 at 10:10

Chandini

540
2
11

i want to add something after `Hi` and before `:` – Ahmad Abo Zaid Oct 03 '18 at 10:13
You can place all of them in another function. refer to my modified answer. – Chandini Oct 03 '18 at 10:14
i have a problem .. i'm use `FlatList` but `FlatList` not display inside function – Ahmad Abo Zaid Oct 03 '18 at 10:23
What do you mean by FlatList not display? – Chandini Oct 03 '18 at 10:28
Added a FlatList component inside the function. Please refer – Chandini Oct 03 '18 at 10:38
not worked :( .. – Ahmad Abo Zaid Oct 03 '18 at 12:34
Can you share your complete code? – Chandini Oct 04 '18 at 09:12

execute content in the if statement inside render

2 Answers2