Connecting element to part of state in react

Question

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)

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 refs 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:

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) // <-- 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 (<div onMouseOver={this.mouseOverHandler}>
            <div id='div1' ref={this.state.items[0]} key={'0'}>
                <div id='subDiv1-1'>
                </div>
                <div id='subDiv1-2'>
                </div>
            </div>
            <div id='div2' ref={this.state.items[1]} key={'1'}>
                <div id='subDiv2-1'>
                </div>
            </div>
            <div className='div3' ref={this.state.items[2]} key={'2'}>
                <div id='subDiv3-1'>
                </div>
            </div>
        </div>);
    }
}

any ideas of how I should go about doing this?

As long as you bind your handler to 'this' (which you appear to be doing in the constructor) you should be able to acesss state in mouseOverHandler, or am I missing the point? — Mark Williams, Nov 30 '16 at 10:21
I might have phrased the question a bit bad (if so I'm sorry), I have no problem accessing the state I have a problem with connecting the state to the div, I have updated the question now — Touchpad, Nov 30 '16 at 13:15

score 1 · Accepted Answer · answered Nov 30 '16 at 15:11

1

You are able to access state in the handler; this worked for me (I reduced what I console logged but that was just to reduce typing, it still shows the wiring up):

 mouseOverHandler(event) {
    if (event.currentTarget.id) {
      switch (event.currentTarget.id) {
        case 'div1':
          console.log('First state part');
          break;
        case 'div2':
          console.log('Second state part');
          break;
        case 'div3':
          console.log('Third state part');
          break;

        default:
          console.log(event.currentTarget);
      }
    }
  }

  render() {
    return (
      <div>
        <div id="div1" className="div1" onMouseOver={this.mouseOverHandler}>
          <div>
            Curabitur aliquet quam id dui posuere blandit.
          </div>
          <div>
            Proin eget tortor risus.
          </div>
        </div>
        <div id="div2" className="div2" onMouseOver={this.mouseOverHandler}>
          <div>
            Nulla porttitor accumsan tincidunt
          </div>
        </div>
        <div id="div3" className="div3" onMouseOver={this.mouseOverHandler}>
          <div>
            Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
          </div>
        </div>
      </div>
    );
  }
}

As you can see, to more easily track which div had received the event I added a handler to each div. Also, I'm using event.currentTarget in the handler.

answered Nov 30 '16 at 15:11

Mark Williams

2,268
1
11
14

do I really have to set the onMouseOver on each affected div? (the one I'm demoing here is a lot smaller than the one I'm using) I mean I guess I could do that but it's so "ugly" in the code, is there no better way? – Touchpad Nov 30 '16 at 15:17
No, I did that because it made my life easier due to event propagation and the like; as long as you can sort out the the triggering element you should be fine to use one handler. I was just trying to show that the handler was wired up correctly. – Mark Williams Nov 30 '16 at 15:23
so there is no way to get for instance the ref connected to the current target? (I mean other then hard coding every single ref and then checking which one is connected with the current id)? – Touchpad Nov 30 '16 at 15:29
Not sure, have a look at this, a bit off-topic but does discuss refs (heir usage is a little controversial!): http://stackoverflow.com/questions/29503213/use-state-or-refs-in-react-js-form-components – Mark Williams Nov 30 '16 at 15:46
haha thanks mate, your solution is good enough, for now at least, thanks for the help =) – Touchpad Nov 30 '16 at 15:53
Cheers, all the best – Mark Williams Nov 30 '16 at 15:57

Connecting element to part of state in react

1 Answers1