Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Can I call a function in react return?

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.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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

>Solution :

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.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading