React : onMouseEnter / onMouseLeave not working with state

Question

Doing a simple tic-tac-toe game. I am trying to get a single cell highlighted on mouse-enter and than back to normal on mouse-leave - using state and inline styling to accomplish that. State changes fine on mouse-enter (so is the styling) however it never sets back to normal on mouse-leave. What am I missing here?

import React, { useState } from 'react';

function Cell(props) {

    let defaultStyle = {backgroundColor: 'none'}
    let selectedStyle = {backgroundColor: 'blue'}


    const [style, setStyle] = useState(defaultStyle)

    const sendData = () =>{
        props.clicker(props.cords)
    }

    const set = () =>{
        setStyle(selectedStyle);

    }

    const unset = () =>{
        setStyle(defaultStyle);
    }

    return (
        <td onClick = {sendData} onMouseEnter= {set} onMouseLeave = {unset} style ={style}>{props.content}</td>
    )
}

export default Cell

Also, if possible, use CSS instead of JS to simulate the `:hover` pseudo-selector. — Emile Bergeron, Mar 23 '21 at 15:04
Does this answer your question? [Is background-color:none valid CSS?](https://stackoverflow.com/questions/8739665/is-background-colornone-valid-css) — Emile Bergeron, Mar 23 '21 at 15:06

score 0 · Accepted Answer · answered Mar 23 '21 at 14:37

Switch backgroundColor: 'none' with backgroundColor: 'transparent'

function Cell(props) {

    let defaultStyle = {backgroundColor: 'transparent'}
    let selectedStyle = {backgroundColor: 'blue'}


    const [style, setStyle] = React.useState(defaultStyle)

    const sendData = () =>{
        props.clicker(props.cords)
    }

    const set = () =>{
        setStyle(selectedStyle);

    }

    const unset = () =>{
        setStyle(defaultStyle);
    }

    return (
        <td onClick={sendData} onMouseEnter={set} onMouseLeave={unset} style={style}>{props.content}</td>
    )
}

ReactDOM.render(<Cell clicker={() => {}} cords={() => {}} content='my content' />, document.querySelector('#root'))

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>

That did the trick! was under the impression 'none' was a thing. Thanks! — Shai, Mar 23 '21 at 14:43

score 0 · Answer 2 · answered Mar 23 '21 at 14:41

none is not a valid background-color, so React skips it and keeps using the previous style of blue. Use something else, like the empty string:

function Cell(props) {

    let defaultStyle = {backgroundColor: ''}
    let selectedStyle = {backgroundColor: 'blue'}


    const [style, setStyle] = React.useState(defaultStyle)

    const sendData = () =>{
        props.clicker(props.cords)
    }

    const set = () =>{
        setStyle(selectedStyle);

    }

    const unset = () =>{
        setStyle(defaultStyle);
    }

    return (
        <div onClick = {sendData} onMouseEnter= {set} onMouseLeave = {unset} style ={style}>{props.content}</div>
    )
}

ReactDOM.render(<Cell content='foobar' />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

score 0 · Answer 3 · answered Mar 23 '21 at 14:41

First of all, don't put a space between '=' and brackets, here is the corrected line :

<td onClick={sendData} onMouseEnter={set} onMouseLeave={unset} style={style}>{props.content}</td>

Second, change {backgroundColor: 'none'} to {backgroundColor: 'transparent'}

Hope you can get your code work :)

React : onMouseEnter / onMouseLeave not working with state

3 Answers3