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    lt div className  post input  gt       lt input className  post data input overlay  placeholder  Ask your question here  ref  postTxt   gt   lt  div gt    How can I achieve that

User · Accepted Answer

Data binding in React can be achieved by using a controlled input. A controlled input is achieved by binding the value to a state variable and a onChange event to change the state as the input value changes.

See the below snippet

_x000D_

class App extends React.Component {
  constructor() {
    super();
    this.state = { value: 'Hello World' };
  }
  handleChange = (e) => {
    this.setState({ value: e.target.value });
  };
  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.value}
          onChange={this.handleChange}
        />
        <p>{this.state.value}</p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>

_x000D_

Update: React Hooks

Here is an equivalent function component of the class defined above.

_x000D_

const { useState } = React;

const App = () => {
  const [value, setValue] = useState('Hello World');
  const handleChange = (e) => setValue(e.target.value);
  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <p>{value}</p>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('app'));

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

_x000D_

User · Answer

There are actually people wanting to write with two-way binding  but React does not work in that way    That s true  there are people who want to write with two-way data binding  And there s nothing fundamentally wrong with React preventing them from doing so  I wouldn t recommend them to use deprecated React mixin for that  though  Because it looks so much better with some third-party packages   import   LinkedComponent   from  valuelink   class Test extends LinkedComponent       state     a    Hi there  I m databinding demo           render               Bind all state members            const   a     this linkAll                Then  go ahead  As easy as that          return                 lt input type  text     a props   gt                      The thing is that the two-way data binding is the design pattern in React  Here s my article with a 5-minute explanation on how it works

User · Answer

With introduction of React hooks the state management  including forms state  became very simple and  in my opinion  way more understandable and predictable comparing with magic of other frameworks  For example   const MyComponent        gt        const  value  setValue    React useState  some initial value        return  lt input value  value  onChange  e   gt  setValue e target value     gt       This one-way flow makes it trivial to understand how the data is updated and when rendering happens  Simple but powerful to do any complex stuff in predictable and clear way  In this case  do  two-way  form state binding   The example uses the primitive string value  Complex state management  eg  objects  arrays  nested data  can be managed this way too  but it is easier with help of libraries  like Hookstate  Disclaimer  I am the author of this library   Here is the example of complex state management   When a form grows  there is an issue with rendering performance  form state is changed  so rerendering is needed  on every keystroke on any form field  This issue is also addressed by Hookstate  Here is the example of the form with 5000 fields  the state is updated on every keystore and there is no performance lag at all

User · Answer

I think  Richard Garside is correct   I suggest some changes to clear even more the code   Change this  onChange   e    gt  this update  field2   e     To this  onChange  this handleOnChange    And also  change this  this setState    name   e target value       To this  this setState    e target name   e target value     Besides  you have to add the  name  attribute to the field with a value that relates with the key on the state object

User · Answer

To bind a control to your state you need to call a function on the component that updates the state from the control s event handler   Rather than have an update function for all your form fields  you could create a generic update function using ES6 computed name feature and pass it the values it needs inline from the control like this    x000D   x000D  class LovelyForm extends React Component   x000D    constructor props    x000D    alert  Construct    x000D      super props   x000D      this state     x000D        field1   Default 1   x000D        field2   Default 2  x000D         x000D      x000D   x000D    update    name  e    gt    x000D      this setState    name   e target value     x000D      x000D   x000D    render     x000D      return   x000D         lt form gt  x000D           lt p gt  lt input type  text  value  this state field1  onChange   e    gt  this update  field1   e     gt  x000D             this state field1  lt  p gt  x000D           lt p gt  lt input type  text  value  this state field2  onChange   e    gt  this update  field2   e     gt  x000D             this state field2  lt  p gt  x000D         lt  form gt  x000D         x000D      x000D    x000D  ReactDOM render  lt LovelyForm  gt   document getElementById  example     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   lt div id  example  gt  lt  div gt  x000D   x000D   x000D

User · Answer

This could be achieved with a hook  However  I would not recommend it  as it strictly couples state and layout     November 2019 Data Bind with Hooks  const useInput    placeholder  initial    gt        const  value  setVal    useState initial      const onChange    e    gt  setVal e target value      const element    lt input value  value  onChange  onChange  placeholder  placeholder   gt      return  element  value      Use it in any functional component  const BensPlayGround        gt        const name   useInput  Enter name here       return            lt  gt               name element               lt h1 gt Hello  name value  lt  h1 gt           lt   gt            Basic version - bind value and onChange  const useDataBind        gt        const  value  setVal    useState         const onChange    e    gt  setVal e target value      return  value  onChange     const Demo    props    gt        const nameProps   useDataBind       return            lt  gt               lt input     nameProps  placeholder  Enter name here    gt               lt h1 gt Hello  nameProps value  lt  h1 gt           lt   gt

User · Answer

Don t need to Break head with setState   in react js  A new library made by me React-chopper  Code Like angularjs in reactjs  Code without setState in reactjs  Go through examples for more description  import React    Component   from  react   import   render   from  react-dom   import Rcp from  react-chopper    class App extends Component     constructor props        super props       this state           name   React             this modal   Rcp this state  this          tank        gt        console log this modal        render         return          lt div gt           lt input value  this modal name  onChange  e   gt  this modal name   e target value    gt           lt p gt  Bang Bang  this modal name   lt  p gt           lt button onClick       gt  this tank    gt console lt  button gt         lt  div gt                render  lt App   gt   document getElementById  root       Comments   Pr Are welcome    Enjoy

User · Answer

Some modules makes simpler data-binding in forms  for example   react-distributed-forms  class SomeComponent extends React Component     state         first name   George          render         return          lt Form binding  this  gt           lt Input name  first name    gt         lt  Form gt                 https   www npmjs com package react-distributed-forms data-binding  It uses React context  so you don t have to wire together input in forms  Here s a live demo

User · Answer

x000D   x000D  class App extends React Component   x000D    constructor     x000D      super    x000D      this state    value       x000D      x000D    handleChange    e    gt    x000D      this setState  value  e target value    x000D      x000D    render     x000D      return   x000D       lt div gt  x000D           lt input type  text  value  this state value  onChange  this handleChange   gt  x000D           lt div gt  this state value  lt  div gt  x000D       lt  div gt  x000D       x000D      x000D    x000D  ReactDOM render  lt App  gt   document getElementById  app     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom js  gt  lt  script gt  x000D   lt div id  app  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Define state attributes  Add universal handleChange event handler  Add name param to input tag for mapping   this state     stateAttrName       handleChange  event   gt       this setState   event target name  event target value             lt input className  form-control  name  stateAttrName  value    this state stateAttrName  onChange  this handleChange   gt

User · Answer

To be short  in React  there s no two-way data-binding   So when you want to implement that feature  try define a state  and write like this  listening events  update the state  and React renders for you   class NameForm extends React Component     constructor props        super props       this state    value            this handleChange   this handleChange bind this          handleChange event        this setState  value  event target value           render         return          lt input type  text  value  this state value  onChange  this handleChange    gt                 Details here https   facebook github io react docs forms html  UPDATE 2020     Note       LinkedStateMixin is deprecated as of React v15  The recommendation is   to explicitly set the value and change handler  instead of using   LinkedStateMixin    above update from React official site   Use below code if you are running under v15 of React else don t    There are actually people wanting to write with two-way binding  but React does not work in that way  If you do want to write like that  you have to use an addon for React  like this   var WithLink   React createClass     mixins   LinkedStateMixin     getInitialState  function         return  message   Hello            render  function         return  lt input type  text  valueLink  this linkState  message      gt             Details here https   facebook github io react docs two-way-binding-helpers html  For refs  it s just a solution that allow developers to reach the DOM in methods of a component  see here https   facebook github io react docs refs-and-the-dom html

User · Answer

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   gt       const  text  setText    useState  there        return props logic text  setText       const App        gt        const  text  setText    useState  hello         const componentDidMount        gt           setText  hey               useEffect componentDidMount            const logic    word  setWord    gt             lt div gt               lt h1 gt  word  lt  h1 gt               lt input type  text  value  word  onChange  e   gt  setWord e target value   gt  lt  input gt               lt h1 gt  text  lt  h1 gt               lt input type  text  value  text  onChange  e   gt  setText e target value   gt  lt  input gt           lt  div gt             return  lt Demo logic  logic    gt       ReactDOM render  lt App   gt  document getElementById  root

[reactjs] Data binding in React

Update: React Hooks

Examples related to reactjs