CODEWITHSUNDEEP
reactjsreact-native
camille
camille

Reputation: 328

Include a function & JSX in Conditionally Rendering

How Can I conditionally render a JSX along with a function in React Native. I want to hide and show loading conditionally.

return (
  state.isLoading ? showLoader(true) :
  showLoader(false)
  (
    <View>
      ...
    </View>
  )
)

the showLoader function is added to the component from another context.

const { showLoader } = useContext(LoaderContext);

Upvotes: 1

Views: 214

Answers (3)

Sourav Dey
Sourav Dey

Reputation: 1150

Conditional rendering in React works the same way conditions work in JavaScript. Here, we can compare it with if else condition, if isLoading is true (state.isLaoding?) it will show the loader (showLoader(true)) else it will show the view(...).

return (
      state.isLoading ? showLoader(true) :
      (
        <View>
          ...
        </View>
      )
    )

Upvotes: 1

Barry Michael Doyle
Barry Michael Doyle

Reputation: 10608

You can accomplish it by doing something like this:

return (
  <View>
    {state.isLoading ?
      showLoader(true) :
      <>
        {showLoader(false)}Insert Content Here
      </> 
    }
  </View>
)

You're question lacks a bit of clarity, if you can provide more information I can give a more precise answer.

Upvotes: 1

Maycon Mesquita
Maycon Mesquita

Reputation: 4590

You can achieve with it:

render() {
  const { showLoader } = useContext(LoaderContext);

  return (
    <View>
      { this.state.isLoading ? showLoader(true) : showLoader(false) }
    </View>
  )
}

Upvotes: 1

Related Questions