12_One‐Way & Two‐Way Data Binding - Maniconserve/React-Wiki GitHub Wiki

Data flows in one direction only — from parent to child via props, or from state to the UI. The UI reflects the data but cannot change it directly.

import { useState } from 'react';
function App() {
const [name, setName] = useState('Arjun');
return (
<div>
<h1>{name}</h1>  {/* UI reads from state — one way */}
</div>
);
}

State → UI. That's it. The <h1> displays whatever is in name, but there is no way for the user to change name by interacting with the <h1>.

Data flows in both directions — state controls the input's displayed value, and the input updates state when the user types. They stay in sync with each other.

import { useState } from 'react';
function App() {
const [name, setName] = useState('Arjun');
return (
<div>
<input
type="text"
value={name}                            // state → input (one direction)
onChange={e => setName(e.target.value)} // input → state (other direction)
/>
<h1>{name}</h1>
</div>
);
}

• value={name} — state controls what the input shows
• onChange — every keystroke updates state
• <h1>{name}</h1> — updates instantly as the user types

Both the input and the heading always show the same value because they both read from the same state.

ONE-WAY
  State ──────────────────► UI
  'Arjun'                  <h1>Arjun</h1>
  (user cannot change state by clicking the h1)
TWO-WAY
State ──────────────────► Input (value={name})
'Arjun'                  shows "Arjun"
▲                           │
└───────────────────────────┘
onChange updates state
every time user types

// ONE-WAY — display only
function OneWay() {
  const [name] = useState('Arjun');
return <h1>{name}</h1>; // user sees it but cannot change it
}
// TWO-WAY — display + edit
function TwoWay() {
const [name, setName] = useState('Arjun');
return (
<div>
<input
value={name}
onChange={e => setName(e.target.value)}
/>
<h1>{name}</h1>
</div>
);
}

• React is one-way by default — data flows down from parent to child via props
• Two-way binding is achieved by combining value and onChange together on an input
• An input with only value={name} and no onChange is called a read-only input — the user cannot type in it
• Two-way binding is what makes a form input controlled — React state is always in charge of the displayed value

Part of the React Project Wiki — see also: State — Complete Guide · JSX Attributes & Expressions

Data flows in one direction only — from parent to child via props, or from state to the UI. The UI reflects the data but cannot change it directly.

import { useState } from 'react';

function App() {
  const [name, setName] = useState('Arjun');

  return (
    <div>
      <h1>{name}</h1>  {/* UI reads from state — one way */}
    </div>
  );
}

State → UI. That's it. The <h1> displays whatever is in name, but there is no way for the user to change name by interacting with the <h1>.

Data flows in both directions — state controls the input's displayed value, and the input updates state when the user types. They stay in sync with each other.

import { useState } from 'react';

function App() {
  const [name, setName] = useState('Arjun');

  return (
    <div>
      <input
        type="text"
        value={name}                            // state → input (one direction)
        onChange={e => setName(e.target.value)} // input → state (other direction)
      />
      <h1>{name}</h1>
    </div>
  );
}

• value={name} — state controls what the input shows
• onChange — every keystroke updates state
• <h1>{name}</h1> — updates instantly as the user types

Both the input and the heading always show the same value because they both read from the same state.

ONE-WAY
  State ──────────────────► UI
  'Arjun'                  <h1>Arjun</h1>
  (user cannot change state by clicking the h1)


TWO-WAY
  State ──────────────────► Input (value={name})
  'Arjun'                  shows "Arjun"
    ▲                           │
    └───────────────────────────┘
          onChange updates state
          every time user types

// ONE-WAY — display only
function OneWay() {
  const [name] = useState('Arjun');

  return <h1>{name}</h1>; // user sees it but cannot change it
}


// TWO-WAY — display + edit
function TwoWay() {
  const [name, setName] = useState('Arjun');

  return (
    <div>
      <input
        value={name}
        onChange={e => setName(e.target.value)}
      />
      <h1>{name}</h1>
    </div>
  );
}

• React is one-way by default — data flows down from parent to child via props
• Two-way binding is achieved by combining value and onChange together on an input
• An input with only value={name} and no onChange is called a read-only input — the user cannot type in it
• Two-way binding is what makes a form input controlled — React state is always in charge of the displayed value