I am beginner of React-Js and I stuck some event handling onmouserover and onmouseout.

let showUpdateRow = () => {}

let hideUpdateRow = () => {}

let bodyContent = props.linkData.map((data, index) => {
  return (
    <tr key={index} onMouseOver={showUpdateRow} onMouseOut={hideUpdateRow}>
      <td>{dataments}</td>
      <td>
        {data.link}
        <div className="updateRow" style={{ display: 'none' }}>
          <MdEdit className="editRow" />
          <MdDelete className="deleteRow" />
        </div>
      </td>
    </tr>
  )
})

onMouseOver Event, I want to show updateRow Div and OnMouseOut Event, I want to hide updateRow Div.

I need to show only updateRow div which currently mouseover inside tr. If I use ref property but on mouseover all updateRowDiv will show.

I need some help , Thanks.

I am beginner of React-Js and I stuck some event handling onmouserover and onmouseout.

let showUpdateRow = () => {}

let hideUpdateRow = () => {}

let bodyContent = props.linkData.map((data, index) => {
  return (
    <tr key={index} onMouseOver={showUpdateRow} onMouseOut={hideUpdateRow}>
      <td>{data.ments}</td>
      <td>
        {data.link}
        <div className="updateRow" style={{ display: 'none' }}>
          <MdEdit className="editRow" />
          <MdDelete className="deleteRow" />
        </div>
      </td>
    </tr>
  )
})

onMouseOver Event, I want to show updateRow Div and OnMouseOut Event, I want to hide updateRow Div.

I need to show only updateRow div which currently mouseover inside tr. If I use ref property but on mouseover all updateRowDiv will show.

I need some help , Thanks.

• javascript
• html
• css
• reactjs

• you can track currently active row id in a private variable(say this._activeRowId) and display or hide a row inside bodyContent's loop by paring row id to this._acriveRowId – hankchiutw Commented Mar 4, 2019 at 15:19
• is there a reason you want to do it in React? would you consider using css instead? example: codesandbox.io/s/x943nky4yq – Tubc Commented Mar 4, 2019 at 15:20

1 Answer 1

If i understand correctly. You could declare a state for showUpdateRow and use that to show/hide your row.

So it will look something like

state = {
  showUpdateRow: false,
};

showHideUpdateRow =  (value) => {
  this.setState({showUpdateRow : value})
}

and in the bodycontent you can use

onMouseOver={showHideUpdateRow(true)} onMouseOut={showHideUpdateRow(false)}

and then in the updateRow style

style={{ display: `${this.state.showUpdateRow ? 'block' : 'none'}` }}