@jonathanbell/

Simple databinding example in React

React

One way databinding example in React using a controlled input

fork
loading
Files
  • src
    • App.js
    • App.css
    • index.css
    • index.js
    • logo.svg
  • package.json
src/App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  state = {
    headingText: 'You can change this text!!!'
  }

  handleChange = (event) => {
    this.setState({ headingText: event.target.value.toUpperCase() });
  }

  render() {
    return (
      <div className="App">
        <h1>{this.state.headingText}</h1>
        <input onChange={this.handleChange} type="text" />
      </div>
    );
  }
}

export default App;