ReactJS set display='inline' onMouseOver

I would like to set display property of a child element to inline, when there is a mouseOver or mouseEnter event in this React component.

I can see that the state is being set, but it does not change for the display property.

export class EditablePageTitle extends React.Component
state =
showEditIcon: 'none'
;

showEditIcon()
console.log('showEditIcon 1 ', this.state.showEditIcon);
this.setState( showEditIcon: 'inline' );
console.log('showEditIcon 2 ', this.state.showEditIcon);


render()
return (
<FlexColumn
style=
alignItems: 'baseline',
paddingBottom: s[3]

>
<div id="page-title" onMouseEnter=() => this.showEditIcon()>
<Input
...this.props
type=this.props.type
defaultValue=this.props.defaultValue
disabled="disabled"
onChange=this.props.onChange
/>
<i
className="fa fa-pencil-alt"
style=
paddingRight: s[3],
color: '#FFFFFF',
fontSize: s[3],
display: this.state.showEditIcon

/>
console.log('this.state.showEditIcon ', this.state.showEditIcon)
</div>
<Label>this.props.label</Label>
</FlexColumn>
);




2 Answers
2

This is possibly a conflict with how Font Awesome and React handle rendering.

If you are using React we recommend the react-fontawesome package or Web Fonts with CSS.

https://fontawesome.com/how-to-use/on-the-web/using-with/react

However, you may just want to try wrapping your icon with a span and apply the display property there.

span

display

<span style= display: this.state.showEditIcon >
<i className="fa fa-pencil-alt"
style=
paddingRight: s[3],
color: '#FFFFFF',
fontSize: s[3]

/>
</span>


Call the showEditIcon method like the following and also you should bind this:

showEditIcon

this

export class EditablePageTitle extends React.Component
constructor(props)
super(props);
this.state =
showEditIcon: 'none'
;

this.showEditIcon = this.showEditIcon.bind(this);


showEditIcon()
console.log('showEditIcon 1 ', this.state.showEditIcon);
this.setState( showEditIcon: 'inline' );
console.log('showEditIcon 2 ', this.state.showEditIcon);


render()
return (
<FlexColumn
style=
alignItems: 'baseline',
paddingBottom: s[3]

>
<div id="page-title" onMouseEnter=this.showEditIcon>
<Input
...this.props
type=this.props.type
defaultValue=this.props.defaultValue
disabled="disabled"
onChange=this.props.onChange
/>
<i
className="fa fa-pencil-alt"
style=
paddingRight: s[3],
color: '#FFFFFF',
fontSize: s[3],
display: this.state.showEditIcon

/>
console.log('this.state.showEditIcon ', this.state.showEditIcon)
</div>
<Label>this.props.label</Label>
</FlexColumn>
);




bind()

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.