Каково выражение на RegularExpressionValidator, чтобы проверить, является ли текст Текстового поля 6 или больше символами долго?

Сам этот компонент в настоящее время не настроен как функциональный компонент без сохранения состояния, так что если это то, чего вы также хотели достичь. Вы захотите внести эти изменения, а также передать логическое значение в ваш компонент с состоянием.

import React from 'react';

const Card = (props) => {

return (

  <div className="Card" onClick={props.handleClick}>

     {props.showFront 
     ?
     <h1>props.front</h1>
     :
     <h1>props.back</h1>
     }

   </div>

    );
  }

export default Card;

вы захотите использовать предыдущее состояние, чтобы переключать ваше состояние, потому что это может вызвать проблемы позже в процессе пакетирования, поэтому ваш компонент с состоянием должен выглядеть примерно так:

import React, {Component} from "React";

class StatefulCard extends Component {
  state = {
    showFront: true // default state to front
  }

  handleClick = () => {
   this.setState(prevState => {
    return {
     showFront: !prevState.showFront
    }
  }
}


  render() {
    return (
      <div>
        <Card 
         handleClick={this.handleClick}
         showFront={this.state.showFront}
/>
      </div>
    );
  }
}

export default Card;