ReplicaValorForm

import React, { Component } from 'react';

class FormTest extends Component {
  constructor(props) {
    super(props);
    this.state = { value: null };//iniciar o estado do state com null para o comonente ser tornar nao controlado

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

  handleChange(event) {
    this.setState({ value: event.target.value.toUpperCase() });
  }
  onChange(e) {
    const { value } = e.target;
    this.setState({
      texto: value.toUpperCase()
    })
  }

  render() {
    return (
      <form>
        <label>
          Nome:
              <input type="text" value={this.state.value} onChange={e => this.onChange(e)} />
        </label>
        <OutputUpper value={this.state.texto}></OutputUpper>
      </form>
    );

  }
}

const styleDiv = {
  textAlign: 'center',
  backgroundColor: '#abeeab',
  color: 'green',
  borderRadius: '5px'
};


class OutputUpper extends React.Component {
  render() {
    return (
      <div style={styleDiv}>
        {this.props.value}
      </div>
    );
  }
};

export default FormTest;