title: React update state on click
body: <p>I have small component which lists data structure as shown below. What i want to do is when i click the <code>update</code> button i want to increment <code>vote</code> key, however, i didn't find a way to do it properly. Do i need to update the whole <code>data</code> state? I have little confuse on it. </p>
  
  <pre><code>let MOCKDATA = [
            {
              id: 1,
              name: 'Test 1',
              vote: 0
            },
            {
              id: 2,
              name: 'Test 2',
              vote: 2
            }];
  </code></pre>
  
  <p><strong>LinkListPage.js</strong></p>
  
  <pre><code>import React from 'react';
  // import LinksData from '../LinksData';
  import Links from './Links';
  // import update from 'react-addons-update';
  
  //localStorage.setItem('linksData', JSON.stringify(LinksData));
  
  let MOCKDATA = [
        {
          id: 1,
          name: 'Test 1',
          vote: 0
        },
        {
          id: 2,
          name: 'Test 2',
          vote: 2
        }];
  
  
  
  class LinkListPage extends React.Component {
    constructor(props, context) {
      super(props, context);
      this.state = {
        data: MOCKDATA
      };
  
      this.update = this.update.bind(this);
  
    }
  
    componentDidMount() {
    }
  
    update() {
      // this.setState({
      //   data:
      // })
  
    }
  
    render() {
  
      let list = this.state.data.map( links =&gt; {
        return &lt;Links key={links.id} update={this.update} data={links} /&gt;;
      });
  
      return (
        &lt;div&gt;
          &lt;ul&gt;{list}&lt;/ul&gt;
          {console.log(this.state.data)}
        &lt;/div&gt;
      );
    }
  
  }
  
  export default LinkListPage;
  </code></pre>
  
  <p><strong>LinksPage.js</strong></p>
  
  <pre><code>import React, {PropTypes} from 'react';
  
  const Links = (props) =&gt; {
    return (
      &lt;li&gt;
        &lt;p&gt;{props.data.name}&lt;/p&gt;
        &lt;p&gt;{props.data.vote}&lt;/p&gt;
        &lt;button onClick={props.update}&gt;Up&lt;/button&gt;
      &lt;/li&gt;
    );
  };
  
  Links.propTypes = {
    data: PropTypes.object,
    name: PropTypes.string,
    vote: PropTypes.number,
    update: PropTypes.func
  };
  
  export default Links;
  </code></pre>
  
  <p><strong>HomePage.js</strong></p>
  
  <pre><code>import React from 'react';
  import LinkListPage from '../containers/LinkListPage';
  
  const HomePage = () =&gt; {
    return (
      &lt;div&gt;
        &lt;LinkListPage /&gt;
      &lt;/div&gt;
    );
  };
  
  export default HomePage;
  </code></pre>
  
  <p>After reading the answers my final result is as below which works fine. Thanks anyway.</p>
  
  <p><strong>LinksPage.js</strong></p>
  
  <pre><code>const Links = (props) =&gt; {
    return (
      &lt;li&gt;
        &lt;p&gt;{props.data.name}&lt;/p&gt;
        &lt;p&gt;{props.data.vote}&lt;/p&gt;
        &lt;button onClick={() =&gt; props.update(props.data.id)}&gt;Up&lt;/button&gt;
      &lt;/li&gt;
    );
  };
  </code></pre>
  
  <p><strong>LinkListPage.js</strong></p>
  
  <pre><code>update(id) {
      const findId = LinksData.filter(item =&gt; {
        item.id === id ? item.vote++ : false;
      });
  
      const data = Object.assign(...findId, LinksData);
  
  
      this.state.data.sort((a, b) =&gt; {
        return b.vote - a.vote;
      });
      //localStorage.setItem('linksData', JSON.stringify(this.state.data));
  
      this.setState({data});
  
    }
  </code></pre>