Data binding in React

Question

What I want to do is when I type some text in an input field, it should appear in another place realtime.

Below is my input;

Answer 1

With the new feature called Hooks from the React team which makes functional components to handle state changes.. your question can be solved easily

import React, { useState, useEffect } from 'react'
import ReactDOM from 'react-dom';

const Demo = props =>{
    const [text, setText] = useState("there");
    return props.logic(text, setText);
};

const App = () => {
    const [text, setText] = useState("hello");

    const componentDidMount = () =>{
        setText("hey");
    };
    useEffect(componentDidMount, []);

    const logic = (word, setWord) => (
        

            
{word}
             setWord(e.target.value)}>
            
{text}
             setText(e.target.value)}>
        
    );
    return ;
};

ReactDOM.render(,document.getElementById("root"));