Is there a way I can call a function in the return section of React? kind of like how in JS I can just call a function by functionName() ?

WHAT EXACTLY AM I TRYING TO ACCOMPLISH? What I am wanting to do in this bakery game is when the player hits $5, the "Purchase Easy Bake Oven" pops up and it will cost them $25 to purchase (At this time I do not necessarily care about the math mathing, I just care for functionality). Once the player decides to purchase, this section disappears and is replaced with "Easy bake Oven" With a button that says $5 where at this point, every time the button is clicked my total increases by 5.

WHAT HAVE I TRIED? I feel like this should be done with an onClick event to switch from const [showEZBake, setShowEZBake] = useState(false) to useState(True). I currently have a Turnary (or whatever you call it), but I feel like this is incorrect because I need to change the state as stated before. I have also attempted to create an if statement inside of a function where I would add an h1 element, but that did not work. Even if it did, my main issue would still be there and that is how to call a function inside of a return.

SUMMARY: I want the "Purchase Oven" text and $5 button to be replaced with Oven and $2 button AFTER the button was clicked.

import React, {useState, useEffect} from 'react'

const App = () => {

  // ======================================
  //                 HOOKS
  // ======================================

  const [score, setScore] = useState(0)

  // ======================================
  //               FUNCTIONS
  // ======================================

  // EARN REVENUE FUNCTIONS
  const earn1 = () => {
    setScore(score   1)
  }

  const earn5 = () => {
    setScore(score   5)
  }

  const reveal = () => {
    // setShowEZBake(false)

    if (score >= 5) {
      return (
        <h1>TEST</h1>
      )
    } else {
      
    }
  }

  const upgrade = () => {
    if (score >= 5) {
      <><h3>Purchase Easy Bake Oven</h3> <button>$5</button></>
    }

    else {

    }
  }


  const [showEZBake, setShowEZBake] = useState(false)

  // ======================================
  //               DISPLAY
  // ======================================

  return (
    <div>
      <h1>Bakery</h1>
      <h2>Revenue {score}</h2>
      <h3>No Bake Pudding</h3><button onClick={earn1}>$1</button>

      
      {
        score >= 5 ? <><h3>Purchase Easy Bake Oven</h3> <button onClick={reveal}>$5</button></>
        :
        null
      }
      <h3></h3>
    </div>
  )
}
export default App

CodePudding user response：

In React, you can call a function inside the return section by simply referencing the function name, just like in JavaScript. In your code, you have a button that calls the reveal function when it is clicked. This function is supposed to return an <h1> element with the text "TEST", but it is not currently doing that because you are not returning anything from the reveal function.

To fix this, you can add a return statement at the beginning of the reveal function to return the <h1> element if the score is greater than or equal to 5, and return null otherwise. Here is an example of how you could do this:

const reveal = () => {
  // If the score is greater than or equal to 5, return the <h1> element
  if (score >= 5) {
    return (
      <h1>TEST</h1>
    )
  } else {
    // Otherwise, return null
    return null
  }
}

After you have updated the reveal function to return the <h1> element, you can call this function in the return section of your component like this:

return (
  <div>
    <h1>Bakery</h1>
    <h2>Revenue {score}</h2>
    <h3>No Bake Pudding</h3><button onClick={earn1}>$1</button>
    
    {
      // Call the reveal function here to display the <h1> element
      reveal()
    }
    <h3></h3>
  </div>
)

This will cause the <h1> element to be displayed when the reveal function is called, which will happen when the button is clicked.

CodePudding user response：

You can do this with using an arrow function.

const App = () => {
  const [score, setScore] = useState(0)

  const earn1 = () => {
    setScore(score   1)
  }

  const earn5 = () => {
    setScore(score   5)
  }

  const upgrade = () => {
    if (score >= 5) {
      setShowEZBake(true)
    }
  }

  const [showEZBake, setShowEZBake] = useState(false)

  return (
    <div>
      <h1>Bakery</h1>
      <h2>Revenue {score}</h2>
      <h3>No Bake Pudding</h3><button onClick={earn1}>$1</button>

      {showEZBake ? (
        <>
          <h3>Easy Bake Oven</h3>
          <button onClick={earn5}>$5</button>
        </>
      ) : (
        <>
          <h3>Purchase Easy Bake Oven</h3>
          <button onClick={upgrade}>$5</button>
        </>
      )}
    </div>
  )
}

The upgrade function is called when the user clicks the "Purchase Easy Bake Oven" button. If the score is greater than or equal to 5, then the upgrade function sets the showEZBake state to true, which causes the "Easy Bake Oven" button to be displayed instead of the "Purchase Easy Bake Oven" button.