CODEWITHSUNDEEP
javascriptreactjsmaterial-uitypeerror
EdG
EdG

Reputation: 2351

Cannot read Property of undeifned Cards material ui

I am using cards from material ui in my react project. I am trying to use two functions in my cards, onMouseOver and onMouseOut. But my code is giving me an error saying "Uncaught TypeError: Cannot read property 'onMouseOver' of undefined". Here is an abstract on that part from my code. 

class ExpandableCard extends Component {
    constructor(props) {
        super(props);
        this.state = {shadow: 1}
    }

    onMouseOver = () => this.setState({shadow: 3});

    onMouseOut = () => {this.setState({shadow: 1})
    };

    render(){
        var Populate = this.props.mediaFiles.map(function (value) {
            return (
            <MuiThemeProvider>
                <Card key = {value.id}
                      onMouseOver={this.onMouseOver}
                      onMouseOut={this.onMouseOut}
                      zDepth={this.state.shadow}
                >

Upvotes: 0

Views: 958

Answers (1)

Andr&#233; Junges
Andr&#233; Junges

Reputation: 5347

It seems you're just having the basic javascript problem of missing the context (this) inside the map function in the render method.

I'd suggest you to change your map function in render to an arrow function (this way its gonna keep the outer context to the inner function) and that should be enough. :)

render() {
  var Populate = this.props.mediaFiles.map((value) => {
    return (
      <MuiThemeProvider>
        <Card key = {value.id}
          onMouseOver={this.onMouseOver}
          onMouseOut={this.onMouseOut}
          zDepth={this.state.shadow}
        >
        ...

Upvotes: 1

Related Questions