title: React self-modifying component with proper state/props
body: <p>I'm working on a pet project right now and I decided to use React for the view. I'm fairly far into developing it but I'm just starting to realize that I might not understand how to use React very well because it seems like in order to do simple things you have to go to some very extreme measures!</p>
  
  <p>So, time for an arbitrary example! Here's the code working on <a href="https://jsfiddle.net/bzqowr0v/">JsFiddle</a></p>
  
  <pre class="lang-js prettyprint-override"><code>var Name = React.createClass({
      render: function() {
          return &lt;button onClick={this.props.onClick.bind(null, this.props.id, 'John')}&gt;{this.props.value}&lt;/button&gt;
      }
  });
  
  var NameContainer = React.createClass({
      getInitialState: function() {
          return {
              names: [
                  { id: 1, name: 'Fred' },
                  { id: 2, name: 'George' }
              ]
          };
      },
      handleClick: function(id, newName) {
          names = this.state.names;
          names.map(function(obj){
              if (obj.id === id) {
                  obj.name = newName;
              }
              return obj;
          });
          this.setState({
              names: names
          });
      },
      render: function() {
          var handleClick = this.handleClick;
  
          var children = this.state.names.map(function(obj){
              return &lt;Name key={obj.id} id={obj.id} value={obj.name} onClick={handleClick} /&gt;;
          });
  
          return (
              &lt;div&gt;
                  {children}
              &lt;/div&gt;
          );
      }
  });
  </code></pre>
  
  <p>The idea is that I'm trying to make a component that can modify itself. In this example that modification is just having a component be able to change its name from its original value to "John".</p>
  
  <h2>Why is this so complicated?</h2>
  
  <p>It seems like this would be made <strong>much</strong> simpler by just setting some state in the Name components and letting them modify themselves. Unfortunately, as far as I can tell the only way to do that would be by setting the initial state based on props which violates the "Props in getInitialState Is an Anti-Pattern" thing.</p>
  
  <h2>Why not just make the components manually?</h2>
  
  <p>In my real application the data is coming from the server, so all of the data must be fetched at once. This is why I used getInitialState to pre-load the data instead of just creating multiple Name components manually. Also, they say in the React docs that state should be stored in a common parent component, so this code follows that pattern.</p>
  
  <h2>Things start to get complex</h2>
  
  <p>The problems start when you need to modify that state. Since it comes in the form of an array of objects (very typical for serializing data from server), you can't just immediately grab the specific object that corresponds to the component you're dealing with. As far as I can tell the only way to know that is to pass an ID around to all child elements so they can pass that back when event handlers are fired to identify themselves. Even then though, you still have to loop through each element in the state to find the one you're actually trying to modify.</p>
  
  <h2>The complexity intensifies...</h2>
  
  <p>Worse yet, it appears that you can't access the key property from inside a component that has that property declared on it, so in order to have all the information you need you have to double-set that value (key and id in my example). This is where the red flags really went up for me since it seems like the only way to accomplish the goal while not breaking pattern is to bypass a part of their system..</p>
  
  <p>Another thing I'm annoyed with is that you have to pass an event handler all the way from the state-holding object to the child object. In this example that's pretty simple but in my actual application that relation is <em>four levels deep</em>. It seems to me that all these intermediate steps just increase the likelihood of introducing bugs by missing a step in the props passing chain.</p>
  
  <h1>So what is the answer?</h1>
  
  <p>Is this just how React is? Is there some massive shortcut I'm completely ignoring? How can this be done simpler while still staying in the constraints I've specified?</p>