برای اینکار باید یک if قراردهیم که بررسی کند زمانیکه کاربر  ورودی را وارد کرد المان HTML  مورد نظر ما را نمایش دهد:

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { username: '' };
  }
  myChangeHandler = (event) => {
    this.setState({username: event.target.value});
  }
  render() {
    let header = '';
    if (this.state.username) {
      header = <h1>Hello {this.state.username}</h1>;
    } else {
      header = '';
    }
    return (
      <form>
      {header}
      <p>Enter your name:</p>
      <input
        type='text'
        onChange={this.myChangeHandler}
      />
      </form>
    );
  }
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

در اینجا المان  مورد نظر خود را در  متغیر header قرار دادیم.سپس با دستور if (this.state.username) بررسی کردیم که فیلد username وارد شده است یا خیر.اگر وارد شده باشد المان header نمایش داده می شود در غیر اینصورت چیزی نمایش داده نمی شود.