I have the following scenario.

function MyComponent() {
  return (
    <View>
      <TextInput ref={ref => (this.input = ref)} style={styles.input} />
      {this.input.isFocused() && <Text>Hello World</Text>}
    </View>
  );
}

This actually works fine, but I get the warning:

MyComponent is accessing findNodeHandle inside its render. render should be a pure function.

How do I conditionally render The text block and avoid this warning?

I have the following scenario.

function MyComponent() {
  return (
    <View>
      <TextInput ref={ref => (this.input = ref)} style={styles.input} />
      {this.input.isFocused() && <Text>Hello World</Text>}
    </View>
  );
}

This actually works fine, but I get the warning:

MyComponent is accessing findNodeHandle inside its render. render should be a pure function.

How do I conditionally render The text block and avoid this warning?

• javascript
• reactjs
• react-native
• purely-functional

2 Answers 2

You can use ponent state :

class MyComponent extends React.Component {

   state = { isFocused: false }

   handleInputFocus = () => this.setState({ isFocused: true })

   handleInputBlur = () => this.setState({ isFocused: false })

   render() {
      const { isFocused } = this.state

      return (
        <View>
          <TextInput 
            onFocus={this.handleInputFocus} 
            onBlur={this.handleInputBlur} 
          />
          {isFocused && <Text>Hello World</Text>}
        </View>
      )
   }
}

You cannot reference refs from the render() method. Read more about the cautions of working with refs here.

As you can see in the image below, the first time the ponent mounts, refs is undefined, when I change the text (Which changes the State, which re-renders the ponent) refs is now available.

An optimal solution would be using state. I was going to post a solution but Freez already did. However, I am still posting this so you know why you should be using state instead of refs.