Как заставить reactJS отображать переменную состояния

Я только начинаю изучать реактивные формы. Я столкнулся с проблемой, когда реакция помечает строку в моем рендере, где я пытаюсь заполнить метку поля ввода. Вот код моего приложения:

import React, { Component } from 'react';
import './App.css';
import { Container, Row, Col, Input, Button, Fa, Card, CardBody } from 'mdbreact';


class App extends Component {

  constructor(props) {
    super(props);
    this.state = { 
      name: {
        valid: true,
        value: '',
        label: 'Your Name',
        length: 0
      }
    }

    this.saveData = this.saveData.bind(this);
  } 

  saveData() {

    let currentComponent = this;

    var validData = true;
    var locaName = {
      valid: true,
      value: '',
      label: 'Your Name',
      length: 0
    }

    locaName.value = document.getElementById("lblName").value;
    locaName.length = locaName.value.length;

    if (locaName.length < 1) {
      validData = false;
      locaName.valid = false;
      locaName.label = "You need to enter your name";
    }

    if (validData == false) {
      currentComponent.setState({ name:locaName });
    }

  }

  render() {

    return (
      <div className="App">
        <div className="d-flex flex-wrap justify-content-center position-absolute w-100 h-50 align-items-center align-content-center">
          <Container>
            <Row>
              <Col md="6">
                <Card>
                  <CardBody>
                    <form>
                      <p className="h4 text-center py-4">Sign up</p>
                      <div className="grey-text">
                        <Input id="lblName" label={this.name.label} icon="user" group type="text" />
                        <Input id="lblEmail" label="Your email" icon="envelope" group type="email" />
                        <Input id="lblConfirmEmail" label="Confirm your email" icon="exclamation-triangle" group type="text" />
                      </div>
                      <div className="text-center py-4 mt-3">
                        <Button color="cyan" onClick={() => 
                        { 
                        this.saveData();
                        }}>Save</Button>
                      </div>
                    </form>
                  </CardBody>
                </Card>
              </Col>
            </Row>
          </Container>
        </div>
      </div>
    )
  }
}

export default App;

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

Любая помощь приветствуется.