CODEWITHSUNDEEP
javascriptreactjs
Yasin Issa Aden
Yasin Issa Aden

Reputation: 147

React add image onClick?

Currently, I want to add an image every time I click incrementally. I have tried to the solution bellow that is commented out.

BallonTest = () => {
  const [money, setMoney] = useState(0);
  const [bank, setBank] = useState(0);
  // const [cash, setCash] = useState(0);

  const enlargeImg = e => {
      setMoney(money + 0.5)
      var img = document.getElementById("img");
      img.style.transform += "scale(1.02)";
      img.style.transition = "transform 0.25s ease";
  }

  const collectMoney = () => {
    // setCash(cash + 1)
    setBank(bank + money);
    setMoney(0);
    var img = document.getElementById("img");
    img.style.transform = "scale(1.00)"
  }

  // const addCash = () => <img className="cash" src={Cash} alt="cash"/>


  return(
    <>
    <div className="ballonTest">
    <div className="header">Ballon Test</div>
    <div className="subHeader">Click on the ballon to earn money</div>
    <img className="ballon" id="img" src={Ballon} alt="Ballon" onClick={enlargeImg}/>
    <div className="text">Nuværende runde {bank}</div>
    <div className="text">Penge i banken {money}</div>
    <Button type="primary" onClick={collectMoney}>Collect</Button>
    </div>
    </>
  )

How do I go about it this example?

Upvotes: 0

Views: 374

Answers (1)

Oriun
Oriun

Reputation: 244

considering that your cash (with a lowercase c) seems to be a number (you tried to add 1 to it), I suggest you use create an array of the desired number (cash) of element and fill it with the images like this :

{new Array(cash).fill(<img className="cash" src={Cash} alt="cash"/>)}

I also assume that Cash (with the uppercase) is the url of the image and a constant outside of BallonTest. The full component would looks like this.

BallonTest = () => {
  const [money, setMoney] = useState(0);
  const [bank, setBank] = useState(0);
  const [cash, setCash] = useState(0);

  const enlargeImg = e => {
    setMoney(money + 0.5)
    var img = document.getElementById("img");
    img.style.transform += "scale(1.02)";
    img.style.transition = "transform 0.25s ease";
  }

  const collectMoney = () => {
    setCash(cash + 1)
    setBank(bank + money);
    setMoney(0);
    var img = document.getElementById("img");
    img.style.transform = "scale(1.00)"
  }

  return(
    <div className="ballonTest">
      <div className="header">Ballon Test</div>
      <div className="subHeader">Click on the ballon to earn money</div>
      <img className="ballon" id="img" src={Ballon} alt="Ballon" onClick={enlargeImg}/>
      <div className="text">Nuværende runde {bank}</div>
      <div className="text">Penge i banken {money}</div>
      {new Array(cash).fill(<img className="cash" src={Cash} alt="cash"/>)}
      <Button type="primary" onClick={collectMoney}>Collect</Button>
    </div>
  )
}

Upvotes: 1

Related Questions