React show image if state is set to true
<p>I'm trying to hide an image by default and only show it when element is hovered. I've been able to set the default state etc.. Only issue is creating an if statement that will show and hide the image.</p>

<p>This is the component:</p>

<pre><code>import React from 'react';
import { Link } from 'react-router';

import Eyecon from '../../static/eye.svg';


class Item extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'Item';
        this.handleHover = this.handleHover.bind(this);
        this.state = {
            hover: false
        };
    }
    mouseOver() {
        this.state.hover = true;
    }
    mouseOut() {
        this.state.hover = false;
    }
    handleHover() {
        console.log("hover");
    }
    render() {
      const { item, i } = this.props;
        return (
            &lt;div className="grid-box"&gt;
                &lt;img src={Eyecon}/&gt;
            &lt;/div&gt;
        )
    }
}


export default Item;
</code></pre>

<p>I've tried a few things, but also want to see what the best practice is.</p>

<p>Thanks for your time</p>