ReactJS Data Binding

Reactjs 2 Way Data Binding

ReactJS Data Binding is pretty simple … if you are doing any web or app development in today’s market, you have most likely heard of ReactJS.

Simply put ReactJS is a Javascript library for building user interfaces. React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

In this example (taken from this tutorial video) I will show you your how 2-way data binding work within ReactJS.

HTML

Our HTML is pretty simple. All we need to make sure we have is a reference to ReactJS and ReactDOM scripts, as well as a DIV with an id of “app”.

<html>
  <body>
    <head>
      <title>2 Way Data Binding with ReactJS</title>
    </head>
    <div id="app"></div>
  </body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
</html>

CSS

Nothing much here, just some basic styles.

html, body {
  display: flex;
  justify-content: center;
}
section#hello-world {
  margin-top: 36px;
  padding-bottom: 36px;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 600px;
}

JS

In our js file we handle all elements that need to be rendered using JSX.JSX is a preprocessor step that adds XML syntax to JavaScript. You can definitely use React without JSX but JSX makes React a lot more elegant. (more about JSX here).

In the following code we leverage the “componentDidMount” feature to handle the data binding prior to the HTML being bound.
View the full working code here.

// create an array of colors
const colorArr = [
  "red",
  "blue",
  "green",
  "orange",
  "purple",
  "cyan",
  "brown",
  "yellow",
  "lightblue"
]
// create our component class
class HelloWorld extends React.Component {
  // setup our constructor passing in props
  constructor(props) {
    super(props);
    this.state = {
      color: "hotpink"
    };
  }
  // handle color loop before component is bound
  componentDidMount() {
    let colorPos = 0;
    setInterval(() => {
      if(colorArr.length - 1 > colorPos) {
        this.setState({
          color: colorArr[colorPos]
        });
        colorPos++
      } else {
        this.setState({
          color: colorArr[colorPos]
        });
        colorPos = 0;
      }
    }, 700)
  }
  // create our color changing method passing in the event
  changeColor(event) {
    this.setState({
      color: event.target.value
    });
  }
  render() {
    const styleObj = {
            backgroundColor: this.state.color,
            fontSize: 64 / 2
          }
    return(
      <section style={styleObj} id="hello-world">
        <h2>{this.state.color}</h2>
        <input value={this.state.color} onChange={this.changeColor.bind(this)} />
      </section>
    );
  }
}
ReactDOM.render(<HelloWorld name="Matt" />, document.getElementById("app"));
// props, style, className, state

Leave a Reply

×
×

Cart

Let's Work Together

Fill out the form below with your information, and I will be in touch.
I really look forward to working together on your project.

  • This field is for validation purposes and should be left unchanged.

To set up a strategy call, please fill out your information and I will reply with a confirmed date and time along with the meeting details.

Best time to call?
In case that doesn't work, is there an alternative date and time?

Let's Work Together

Fill out the form below with your information, and I will be in touch. I really look forward to working together on your project.

  • This field is for validation purposes and should be left unchanged.