hiding a particular element of a row using react js

Question

I have a array of div elements as follows:-

var accdata = [];
for(var i = 0;i < returndata1.length;++i){
accdata.push(
<div className="data-main" onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>
    <span className="data-child">{returndata1[i].Project}</span>
    <span className={this.state.cls}>
        <span className="flag"></span>
        <span className="share"></span>
        <span className="star"></span>                  
    </span>
</div>
);
}

//toggle function
toggleHover(){
    this.setState({hover: !this.state.hover})
    if(this.state.hover === true){
        this.setState({cls: 'icon-display'})
    }
    else{
        this.setState({cls: ''})
    }
}

but on mouseover the span element of all the divisions disappears. how can I set like if we mouseover a particular row only the span element of that row disappears?

I don't see any array. Please provide a complete but minimal example. Also keep in mind that IDs must be unique throughout the page. — Felix Kling
– Felix Kling, Commented Nov 2, 2015 at 5:32
I am sorry. Now I have posted my latest code. I removed the id. — Dhanya
– Dhanya, Commented Nov 2, 2015 at 5:41
You have to remember the index of the hovered row somewhere / somehow and only apply the class to that row.This might be a good opportunity to encapsulate this div into a new component. — Felix Kling
– Felix Kling, Commented Nov 2, 2015 at 5:45
If I were you, I would apply 'cls' as a state variable to each element of accdata array and remember their states. Then in the onMouseLeave function, pick up the element's index and change it's own cls state accordingly. — JavaScripter
– JavaScripter, Commented Nov 2, 2015 at 6:19

Jordan Vermeir · Accepted Answer · 2015-11-03 15:21:50Z

4

The easiest way to achieve this is using css. Here's an example using some generic css classes: http://jsfiddle.net/9utga8ya/2/

React:

var accdata = [];
for(var i = 0;i < returndata1.length;++i){
    accdata.push(
        <div className="data-main">
            <span className="data-child">{returndata1[i].Project}</span>
            <span className="icon-display">
                <span className="flag"></span>
                <span className="share"></span>
                <span className="star"></span>                  
            </span>
        </div>
    );
}

CSS:

.data-main .icon-display {
    display: inline;
}

.data-main:hover .icon-display {
    display: none;
}

answered Nov 3, 2015 at 15:21

Jordan Vermeir

563 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

hiding a particular element of a row using react js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related