ReactJS Ownership

ReactJS Ownership

In React, an owner is the component that sets the props of other components. More formally, if a component X is created in component Y’s render() method, it is said that X is owned by Y.

Example: 

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="http://fb.me/react-0.12.2.js"></script>
  <script type="text/javascript" src="http://fb.me/JSXTransformer-0.12.2.js"></script>
</head>
<body>
  <script type="text/jsx">
    var App = React.createClass({
      getInitialState: function() {
        return {
          txt: ''
        }
      },
      update: function(e) {
        this.setState({txt: e.target.value});
      },
      render: function() {
        return (
          <div>
            <Widget txt={this.state.txt} update={this.update} />
            <Widget txt={this.state.txt} update={this.update} />
          </div>
        );
      }
    });

    var Widget = React.createClass({
      render: function() {
        return (
          <div>
            <input type="text" onChange={this.props.update} />
            <br />
            <b>{this.props.txt}</b>
          </div>
        );
      }
    });

    React.render(<App txt="this is the txt prop" />, document.body);
  </script>
</body>
</html>

The example above Widget component is owned by App component.

So far so good, That’s it!!! See ya!!! :)