Tithos Tithos - 11 months ago 77
React JSX Question

Why is my react flux function not defined?

I have been successfully writing a reactjs app. It works well. I have been writing a new component to take lat and long coords from State and pass it to a function I defined called

and bound it to
in the constructor state is defined in. the same way I have in other components i have written The work as expected.

Here is my code:

'use strict';

import React from 'react';

import MapStore from '../../../stores/MapStore';


export default class BathroomList extends React.Component {
constructor() {
this.handleMouseOver = this.handleMouseOver.bind(this);
this.state = {
lat: MapStore.getLat(),
long: MapStore.getLong()

handleMouseOver () {
console.log( 'Hover' + Date.now() )
MapActions.setBathroomListMap(this.state.lat, this.state.long)

render() {
let listSrc = MapStore.bathrooms.listSrc;
const bathrooms = MapStore.bathrooms.map(function(bathroom, i, mouseOver) {
return (
<div key={i}>
<div className='bathroom-list' key={i}>
<button onClick={this.handleMouseOver()} ><h1> {bathroom.bathroomName}</h1></button>
<div className='dates'>
<div className='date'>Found: {bathroom.date_found}</div>
<div className='date'>Confirmed: {bathroom.last_confirmed}</div>

return (

<div className='bathroom-map'>
<iframe src={listSrc} className='map-frame' />

This is the error i am getting
BathroomList.js?ddeb:31 Uncaught TypeError: Cannot read property 'handleMouseOver' of undefined

I am thinking it is not defined in the scope of the
const bathrooms = MapStore.bathrooms.map(function(bathroom, i, mouseOver)

Please help

Answer Source

Your thinking is correct.

Change MapStore.bathrooms.map(function(bathroom, i, mouseOver) {

to: MapStore.bathrooms.map((bathroom, i, mouseOver) => {

Also the following looks like an error to me:

<button onClick={this.handleMouseOver()}>

You want this action to happen on click right? Not when you're defining the component. Change this to:

<button onClick={this.handleMouseOver}>