Creating an Emoji Button
Creating a button that opens up emojis in a stack
2. Opening up the stack of emoji images on click
3. Overlaying the images on the existing elements instead of pushing them aside
This solution replaces rendering only the emoji choices above the button when it's clicked. (for this you need the id of the element you want to nest it in on the page, and it was to overlap multiple different elements)
export default class ActionBar extends Component{
  ...
  render(){
    ...
    <EmojiList />
  }
}
Which triggered the React lifecycle:
Image by A. Sharif
And finally in the EmojiList component's render I used a regular button, so that it could use it's button like properties while keeping it wrapped with the states and properties I needed:
export default class EmojiList extends Component{
  ...
  render(){
    <button onClick={this.clickHandler} ... />
    ...
  }
}
position: absolute;
in the css.
Challenges:
1. Adding the button in the right spot among the existing elements on the page2. Opening up the stack of emoji images on click
3. Overlaying the images on the existing elements instead of pushing them aside
Solutions
1. Adding the button in the right spot:
The solution to this was re-rendering the button that opens the emoji choices along with the emoji choices themselves so that they can be placed relative to each other.This solution replaces rendering only the emoji choices above the button when it's clicked. (for this you need the id of the element you want to nest it in on the page, and it was to overlap multiple different elements)
2. Opening up the stack:
I replaced the generic button in the button's parent div (where it was originally being shown on the page) with my created Component EmojiList, instantiating it without any properties (ie. props):export default class ActionBar extends Component{
  ...
  render(){
    ...
    <EmojiList />
  }
}
Which triggered the React lifecycle:
Image by A. Sharif
And finally in the EmojiList component's render I used a regular button, so that it could use it's button like properties while keeping it wrapped with the states and properties I needed:
export default class EmojiList extends Component{
  ...
  render(){
    <button onClick={this.clickHandler} ... />
    ...
  }
}
3. Overlaying the emoji choices over the rest of the page
This was probably the most time consuming of my challeges, but all it needed was:position: absolute;
in the css.
Comments
Post a Comment