How to Save PNG Address File to UseState? (Getting Type unknown is not assignable to type string)-CodePudding

import './App.css';
import React, {useState, useEffect} from "react";
import two_of_clubs from  "./images/2_of_clubs.png";
import two_of_diamonds from  "./images/2_of_diamonds.png";
import two_of_hearts from  "./images/2_of_hearts.png";
import two_of_spades from  "./images/2_of_spades.png";
import three_of_clubs from  "./images/3_of_clubs.png";
import three_of_diamonds from  "./images/3_of_diamonds.png";
import three_of_hearts from  "./images/3_of_hearts.png";
import three_of_spades from  "./images/3_of_spades.png";
import four_of_clubs from  "./images/4_of_clubs.png";
import four_of_diamonds from  "./images/4_of_diamonds.png";
import four_of_hearts from  "./images/4_of_hearts.png";
import four_of_spades from  "./images/4_of_spades.png";
import five_of_clubs from  "./images/5_of_clubs.png";
import five_of_diamonds from  "./images/5_of_diamonds.png";
import five_of_hearts from  "./images/5_of_hearts.png";
import five_of_spades from  "./images/5_of_spades.png";
import six_of_clubs from  "./images/6_of_clubs.png";
import six_of_diamonds from  "./images/6_of_diamonds.png";
import six_of_hearts from  "./images/6_of_hearts.png";
import six_of_spades from  "./images/6_of_spades.png";
import seven_of_clubs from  "./images/7_of_clubs.png";
import seven_of_diamonds from  "./images/7_of_diamonds.png";
import seven_of_hearts from  "./images/7_of_hearts.png";
import seven_of_spades from  "./images/7_of_spades.png";
import eight_of_clubs from  "./images/8_of_clubs.png";
import eight_of_diamonds from  "./images/8_of_diamonds.png";
import eight_of_hearts from  "./images/8_of_hearts.png";
import eight_of_spades from  "./images/8_of_spades.png";
import nine_of_clubs from  "./images/9_of_clubs.png";
import nine_of_diamonds from  "./images/9_of_diamonds.png";
import nine_of_hearts from  "./images/9_of_hearts.png";
import nine_of_spades from  "./images/9_of_spades.png";
import ten_of_clubs from  "./images/10_of_clubs.png";
import ten_of_diamonds from  "./images/10_of_diamonds.png";
import ten_of_hearts from  "./images/10_of_hearts.png";
import ten_of_spades from  "./images/10_of_spades.png";
import ace_of_clubs from  "./images/ace_of_clubs.png";
import ace_of_diamonds from  "./images/ace_of_diamonds.png";
import ace_of_hearts from  "./images/ace_of_hearts.png";
import ace_of_spades from  "./images/ace_of_spades.png";
import jack_of_clubs from  "./images/jack_of_clubs.png";
import jack_of_diamonds from  "./images/jack_of_diamonds.png";
import jack_of_hearts from  "./images/jack_of_hearts.png";
import jack_of_spades from  "./images/jack_of_spades.png";
import queen_of_clubs from  "./images/queen_of_clubs.png";
import queen_of_diamonds from  "./images/queen_of_diamonds.png";
import queen_of_hearts from  "./images/queen_of_hearts.png";
import queen_of_spades from  "./images/queen_of_spades.png";
import king_of_clubs from  "./images/king_of_clubs.png";
import king_of_diamonds from  "./images/king_of_diamonds.png";
import king_of_hearts from  "./images/king_of_hearts.png";
import king_of_spades from  "./images/king_of_spades.png";

const cards = [
    two_of_clubs,
    two_of_diamonds,
    two_of_hearts,
    two_of_spades,
    three_of_clubs,
    three_of_diamonds,
    three_of_hearts,
    three_of_spades,
    four_of_clubs,
    four_of_diamonds,
    four_of_hearts,
    four_of_spades,
    five_of_clubs,
    five_of_diamonds,
    five_of_hearts,
    five_of_spades,
    six_of_clubs,
    six_of_diamonds,
    six_of_hearts,
    six_of_spades,
    seven_of_clubs,
    seven_of_diamonds,
    seven_of_hearts,
    seven_of_spades,
    eight_of_clubs,
    eight_of_diamonds,
    eight_of_hearts,
    eight_of_spades,
    nine_of_clubs,
    nine_of_diamonds,
    nine_of_hearts,
    nine_of_spades,
    ten_of_clubs,
    ten_of_diamonds,
    ten_of_hearts,
    ten_of_spades,
    ace_of_clubs,
    ace_of_diamonds,
    ace_of_hearts,
    ace_of_spades,
    jack_of_clubs,
    jack_of_diamonds,
    jack_of_hearts,
    jack_of_spades,
    queen_of_clubs,
    queen_of_diamonds,
    queen_of_hearts,
    queen_of_spades,
    king_of_clubs,
    king_of_diamonds,
    king_of_hearts,
    king_of_spades,


]

function App() {

  const [dealerCardVisible, setDealerCardVisible] = useState(null);
  const [dealerCardHidden, setDealerCardHidden] = useState(null);
  const [userCardVisible, setUserCardVisible] = useState(null);
  const [userCardHidden, setUserCardHidden] = useState(null);

  const createNewGame = () => {
    setDealerCardVisible(cards[Math.floor(Math.random() * cards.length)])
    setDealerCardHidden(cards[Math.floor(Math.random() * cards.length)])
    setUserCardVisible(cards[Math.floor(Math.random() * cards.length)])
    setUserCardHidden(cards[Math.floor(Math.random() * cards.length)])

  }

  useEffect(() => {
    alert((cards[Math.floor(Math.random() * cards.length)]))
  },[])


  return (
    <div className="App">
     <div className = "dealer-div">
         <img className = "card"
            src = {dealerCardVisible}
            alt = "card"
         >
          </img>
     </div>
      <div className = "user-div">
      </div>
    </div>
  );
}

export default App;

I'm trying to put an import image into useState which I initialized as null. When I try to do this I get "Type unknown is not assignable to type string". I get the error when I do Here is my code. Thanks.

CodePudding user response：

You need to check if dealerCardVisible is not null before rendering.

...
 <div className = "dealer-div">
  {dealerCardVisible && (<img
   src = {dealerCardVisible}
   alt = "card"
  >
  </img>)}
 </div>
...

Added working sample - Test Images codesandbox