Попытка добавить кнопку отправки, которая отправляет состояние на метку

Метка не отображается, когда я нажимаю кнопку отправки.

Я пробовал использовать тернарные операторы. Я попытался передать состояние исходной метки на кнопку onClick.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

class Bankcard extends React.Component {
  constructor(props) {
    super(props);

    this.changeName = this.changeName.bind(this);
    this.resetButton = this.resetButton.bind(this);
    this.submitName = this.submitName.bind(this);

    //these functions can be bound in the render! Yay!
    this.state = { cardHolderName: " ", submitButtonState: " ", mode: "view" };
  }

  changeName(e) {
    this.setState({ cardHolderName: e.target.value });
  }

  resetButton() {
    this.setState({ cardHolderName: " " });
  }

  submitName() {
    this.setState({
      submitButtonState: this.state.cardHolderName,
      mode: "view"
    });
  }

  render() {
    const cardDetails = sampleInfo[0];

    return (
      <div className = "cssmainbox">
        <InsertName
          onNameChange = {this.changeName}
          cardHolderName = {this.state.cardHolderName}
        />

        <div className = "csslabel">
          <label>{this.state.cardHolderName}</label>
        </div>
        <div className = "cssbutton" />

        <ResetButton onResetClick = {this.resetButton} />

        <br />
        <br />
        <div className = "cssmainnum">{cardDetails.mainnum}</div>
        <br />

        <SubmitButton
          onSubmitClick = {this.submitName}
          submitButtonState = {this.state.submitButtonState}
        />
      </div>
    );
  }
}

const sampleInfo = [
  {
    mainnum: 123456789,
    validthru: "08/19",
    vsc: 1234
  }
];

class InsertName extends React.Component {
  render() {
    return (
      <div>
        <input
          type = "text"
          name = "theusersname"
          onChange = {this.props.onNameChange}
          value = {this.props.cardHolderName}
        />
      </div>
    );
  }
}

class ResetButton extends React.Component {
  render() {
    return (
      <div>
        <button onClick = {this.props.onResetClick}>Reset</button>
      </div>
    );
  }
}

class SubmitButton extends React.Component {
  render() {
    const view = this.state.mode === "view";
    return (
      <div>
        <button
          value = {this.props.cardHolderName}
          onClick = {this.props.onNameChange}
        >
          Submit
        </button>
        {view ? null : <p>{this.state.cardHolderName}</p>}
      </div>
    );
  }
}

ReactDOM.render(<Bankcard />, document.getElementById("root"));

Я хочу использовать кнопку отправки, которая считывает текст с метки, а затем отправляет ее на другую метку. Метка назначения должна быть скрыта до тех пор, пока не будет нажата кнопка отправки. Он не показывает ярлык независимо от того, сколько раз я нажимаю на эту чертову кнопку «Отправить»!

Может кто-нибудь сказать мне, как написать это, чтобы это работало, пожалуйста?