title: Connecting element to part of state in react
body: <p>I'm currently learning some react and some of you might think I go about this the wrong way but I want to try and build something in pure react, no redux, no plugins (well react-dom doesn't count as a plugin)</p>
  
  <p>however I've sort of hit a snag, I want to connect a element to a part of the state so that I on mouse over can access that part of the state with as little problems as possible, I've been looking into <code>refs</code> but to my understanding that's basically connecting your state to the element and not the other way around
  as a pseudo code example I want something along these lines:</p>
  
  <pre><code>class Example extends Component {
      constructor () {
          super();
          this.mouseOverHandler = this.mouseOverHandler.bind(this);
  
          this.state = {
              items: [
                  {
                      name: 'First state part',
                      description: 'this part is ment to be connected to div1'
                  },
                  {
                      name: 'Second state part',
                      description: 'this part is ment to be connected to div2'
                  },
                  {
                      name: 'Third state part',
                      description: 'this part is ment to be connected to div3'
                  }
              ]
          }
      }
  
      mouseOverHandler(event) {
          console.log(event.target.refs) // &lt;-- this is where I struggle
          /**
           * what I want here is
           *
           * if I hover #div1 I want  console.log to show:
           * {
           *     name: 'First state part',
           *     description: 'this part is ment to be connected to div1'
           * }
           *
           * if I hover #div2 I want  console.log to show:
           * {
           *     name: 'Second state part',
           *     description: 'this part is ment to be connected to div2'
           * }
           *
           * and if I hover #div3 I want  console.log to show:
           * {
           *     name: 'Third state part',
           *     description: 'this part is ment to be connected to div3'
           * }
           */
      }
  
      render () {
          return (&lt;div onMouseOver={this.mouseOverHandler}&gt;
              &lt;div id='div1' ref={this.state.items[0]} key={'0'}&gt;
                  &lt;div id='subDiv1-1'&gt;
                  &lt;/div&gt;
                  &lt;div id='subDiv1-2'&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id='div2' ref={this.state.items[1]} key={'1'}&gt;
                  &lt;div id='subDiv2-1'&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className='div3' ref={this.state.items[2]} key={'2'}&gt;
                  &lt;div id='subDiv3-1'&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;);
      }
  }
  </code></pre>
  
  <p>any ideas of how I should go about doing this?</p>