Don Warren Don Warren - 7 months ago 40
React JSX Question

(React) Can't have content hide on hover?

So I have this code here, where I am essentially trying to hide some icon, when I hover over its parent div. Or make it visible, but either way...

export class ProgramDescription extends React.Component {

constructor(props) {

showIcon() { = 'visible';

hideIcon() { = 'hidden';

componentDidMount() { = 'hidden';

render() {
return (
<div className="ui one cards">
<div className="card">
<div className="content">
<div className="header">Program description</div>
<div className="description package" onMouseEnter={ this.showIcon }
onMouseLeave={ this.hideIcon }>
<i ref="edit" id="edit-icon" className="edit icon"/>
<p id="desc">
Lorem Ipsum</p>

But apparently im getting this error, whenever I hover:

Uncaught TypeError: Cannot read property 'edit' of undefined

Even though I do have an element with ref='edit'. The code for the componentDidMount() function does work though, so I am assuming that the references in both showIcon() and hideIcon() are generated at the start, before the 'edit' element is even rendered. I think thats dumb of js to just "precache" and not read my functions "as-is".

Anyways, how do I fix this? Something about states?


its because you didn't bind the functions so its context is of event instead of react, you can bind functions it in two ways

1.constructor ( Preferred way )

this.showIcon = this.showIcon.bind(this)

then in Jsx use

  1. in JSX



    //instead of