Variable not displaying on Screen

Question

I've set condition for when a user enters numbers into a text box depending on what the numbers entered start with on screen it should display the name of the card.I seem to be changing the variable name fine but am having issues actually displaying the variable name. I'm wondering whether instead of having the if statements in the CardCheck.js they should maybe be in App.js or CardTypeDisplay.js. Apologies first week on React.

App.js

import "./App.css";
import React from "react";
import CardCheck from "./CardCheck";
import CardTypeDisplay from "./CardTypeDisplay";

class App extends React.Component {
  state = {
    cardNumber: "",
    cardType: "",
  };

  handleChange = (event) => {
    this.setState({ cardNumber: event.target.value });
  };

  handleClick = () => {
    let { cardNumber } = this.state;
    let { cardType } = this.state;

    this.setState({
      cardType: cardType,
      cardNumber: "",
    });
  };

  render() {
    let { cardNumber } = this.state;
    let { cardType } = this.state;

    return (
      <div className="App">
        <h1>Taken Yo Money</h1>
        <CardCheck
          cardNumber={cardNumber}
          handleChange={this.handleChange}
          handleClick={this.handleClick}
        />
        <CardTypeDisplay cardType={cardType} />
      </div>
    );
  }
}
export default App;

CardCheck.js

function CardCheck(props) {
  let { cardNumber, handleChange, handleClick } = props;
  let cardType = props;

  if (cardNumber.match(/^34/) || cardNumber.match(/^38/)) {
    cardType = "AMEX";
    console.log(cardType);
  } else if (cardNumber.match(/^6011/)) {
    cardType = "Discover";
    console.log(cardType);
  } else if (
    cardNumber.match(/^51/) ||
    cardNumber.match(/^52/) ||
    cardNumber.match(/^53/) ||
    cardNumber.match(/^54/) ||
    cardNumber.match(/^55/)
  ) {
    cardType = "MasterCard";
    console.log(cardType);
  } else if (cardNumber.match(/^4/)) {
    cardType = "Visa";
    console.log(cardType);
  }
  return (
    <div className="TweetInput">
      <div className="bar-wrapper"></div>
      <textarea onChange={handleChange} value={cardNumber}></textarea>
      <footer>
        <button onClick={handleClick} value={cardType}>
          Enter Card Details
        </button>
      </footer>
    </div>
  );
}
export default CardCheck;

CardTypeDisplay.js

function CardTypeDisplay(props) {
  let { cardType } = props;

  return (
    <div className="cardType">
      <p> {cardType} </p>
    </div>
  );
}

export default CardTypeDisplay;

Answer 1

You could use the hook useEffect in CardCheck to perform an action each time that cardNumber changes

Like this

  useEffect(() => {
   if (cardNumber.match(/^34/) || cardNumber.match(/^38/)) {
       cardType = "AMEX";
       console.log(cardType);
   } else if (cardNumber.match(/^6011/)) {
    cardType = "Discover";
    console.log(cardType);
   } else if (
    cardNumber.match(/^51/) ||
    cardNumber.match(/^52/) ||
    cardNumber.match(/^53/) ||
    cardNumber.match(/^54/) ||
    cardNumber.match(/^55/)
   ) {
      cardType = "MasterCard";
      console.log(cardType);
   } else if (cardNumber.match(/^4/)) {
      cardType = "Visa";
      console.log(cardType);
   }

  },{cardNumber}) 
 

Also you are defining cartType in CardCheck and CardCheck doesn't know that variable. What you could do is pass this value as parameter in handleClick

        <button onClick={(e) => handleClick(e,cartType)} >
          Enter Card Details
        </button>

And in receive it and change the state

handleChange = (event, type) => {
    this.setState({ cardNumber: event.target.value, cartType:type });
  };