How to implement a simple example in react: fill in the input - its value is displayed in the text?

Question

React

Don't throw slippers - I decided to pick react for the first time.
Basically hello world.
There is input, there is text on the page. We enter something into input - value is displayed in the text.
I, in fact, have a misunderstanding about how to implement this if the input is in one component, and the text is in another?
Or is it already crutches and bicycles and you can’t do that?

Answer 1

Without redux:

const Input = (props) => (
  <input type="text" onChange={props.handleChange} />
)

const Output = (props) => (
  <div>{props.text}</div>
)

class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {}
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange (e) {
    this.setState({
      value: e.target.value
    })
  }

  render () {
    return (
      <div>
        <Input handleChange={this.handleChange} />
        <Output text={this.state.value} />
      </div>
    )
  }
}

Answer 2

https://habrahabr.ru/post/279249/