Touchpad Touchpad - 4 days ago 6
React JSX Question

Connecting element to part of state in react

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?

Answer

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.

Comments