need to cycle between tornado divs on click and onrest - cant change state from render so this is no-go

tornado.jsx

// https://github.com/diegohaz/arc/wiki/Atomic-Design
import React, { Component } from 'react'
import { Badge, IconButton, Heading, Paragraph, AlignContainer, ParagraphHolder, PrimaryNavigation, PrimaryNavigationGlam, Blockquote } from 'components'
import styled from 'styled-components'
import CanvasContainer from './CanvasContainer';
import renderIf from 'render-if'
import EmojiSelector from './EmojiSelector';
import glamorous from "glamorous";
import {Motion, spring} from 'react-motion';
import { observable, action } from 'mobx';
import { observer } from 'mobx-react';
import mobxStore from './store';

const FlexContainer = styled.div`
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
`
const FlexRow = styled.div`
  flex-direction: row;
  display: flex;
  width: 100%;
`

const Flex1 = styled.div`
  flex: 1;
  flex-direction: column;
  display: flex;
`

const FlexRow2 = styled.div`
  flex-direction: row;
  justify-content: left;
`
const FlexColumn = styled.div`
  flex-direction: column;
  justify-content: center;
`

const Hello = styled.div`
  color: tomato;
  max-width: 80px;
  background-color: blue;
`

// const ClickEmoji = glamorous.div(
//   {
//     '&::after': {
//       content: `\\01F601`,
//     }
//   },
//   ({size})=>({
//     fontSize: size
//   }),
// );

const EmojiGlamor = glamorous.div(
  {
    position: 'absolute',
    backgroundColor: 'red',
    borderRadius: "20px",
    marginTop: '-20px',
    marginLeft: '10px',
    marginRight: '10px'
  },
  ({size})=>({
    fontSize: size
  }),
  ({shape})=>({
    width: shape,
    height: shape*1.2
  }),
  ({offsetleft})=>({
    left: offsetleft
  }),
  ({offsettop})=>({
    top: offsettop
  }),
  ({font})=>({
    fontSize: font
  })
);

const styles = {
  SelectorMargin: {
    margin: '0 auto'
  },
  inputstyle: {
    width: "300px"
  },
  relativeStyle: {
    position: "relative"
  },
  tornadostyling: {
    fontSize: '100px',
  },
  weatherholder: {
    margin: '0 auto',
    position: 'relative',
    backgroundColor: 'blue',
    width: '80%',
    height: '200px',
    verticalAlign: 'center',
    textAlign: 'center',
  }
}

@observer
class EmojiMagic extends Component{
  constructor(props){
    super(props)
    this.state = {
      searchEmoji: '',
      emojinumber: null,
      searchVisible: true,
      savedEmoji: null,
      tornadobuttonvisible: true,
      sendTornado: false,
      tornadoplaceholder: false,
      onRest: undefined,
      onRestplaceholder: undefined
    }
  }

  setEmoji(emoji){
    console.log("***************");
    console.log('value of the emoji in setEmoji in index ', emoji);
    this.setState({
      emojinumber:emoji
    }, ()=>{
      console.log('after setstate of emoji in index and value is ', this.state.emojinumber);
    })
  }

  setSelectBox(emojiname){
    mobxStore.setEmojiSearch(emojiname);
    this.setState({
      searchEmoji: emojiname,
      savedEmoji: emojiname,
      searchVisible: false
    })
  }

  tornadoclicked(e){
    e.preventDefault();
    console.log('tornadoclicked')
    this.setState({
      sendTornado: true
    })
    mobxStore.setTornadobuttonvisible(false)
  }

  tornadoDone(){
    console.log('inside tornadoDone');
    this.setState({
      sendTornado: false,
      tornadoplaceholder: false
    }, ()=>{
      console.log('after sendTornado change state and its value is ', this.state.sendTornado)
    })
    mobxStore.setTornadobuttonvisible(false)
  }

  clearSearchBox(searchEmoji){
    var self = this;
    setTimeout(()=>{
      if (searchEmoji!=mobxStore.emojiName){
        self.setState({
          searchEmoji: ''
        })
      }
    },10000);
  }

  tornadobuttonfinished(){
    if(!mobxStore.tornadobuttonvisible){
      mobxStore.setTornadoplaceholdervisible(true);
    }
  }

  tornadoplaceholderfinished(){
    if(!mobxStore.tornadoplaceholder){
      mobxStore.setTornadoplaceholdervisible(true);
    }
  }

  render(){
    return (
      <FlexContainer style={styles.relativeStyle}>
        <AlignContainer>
          <FlexRow>
            <AlignContainer>
              <Heading>Why Everything You Think Is Wrong and the World Is Bullshit</Heading>
            </AlignContainer>
          </FlexRow>
          <FlexRow>
            <AlignContainer>
              <PrimaryNavigationGlam clicked={'emoji'}/>
            </AlignContainer>
          </FlexRow>
          <br/>
          <AlignContainer>
            <FlexRow>
              <input style={styles.inputstyle}  value={mobxStore.emojiSearch} onClick={(e)=>{mobxStore.setEmojiSearch('')}} onChange={(e)=>{mobxStore.setEmojiSearch(e.target.value)}} type="searchEmoji" name="searchEmoji" placeholder="Search Emoji"/>
            </FlexRow>
            <FlexRow style={styles.relativeStyle}>
              <EmojiSelector styles={styles.SelectorMargin} searchEmoji={mobxStore.emojiSearch} clearSearchBox={this.clearSearchBox.bind(this)} setEmoji={this.setEmoji.bind(this)}  searchVisible={this.state.searchVisible} setSelectBox={this.setSelectBox.bind(this)}/>
            </FlexRow>
          </AlignContainer>
          <br/>
          <FlexRow>
            <CanvasContainer emojinumber={this.state.emojinumber} searchEmoji={this.state.searchEmoji}
            tornadoDone={this.tornadoDone.bind(this)}
             savedEmoji={this.state.savedEmoji} sendTornado={this.state.sendTornado}/>
          </FlexRow>
          <br/>
          <FlexRow>

            <div style={styles.weatherholder}>
              <Motion style={{fontspring: spring(mobxStore.tornadobuttonvisible ? 100 : 0)}}
                onRest={this.tornadobuttonfinished()}
              >
                 {style =>
                   (
                     <EmojiGlamor
                      size={`${style.fontspring}px`}
                      shape={`${style.fontspring}px`}
                      offsetleft={`${100-0.5*style.fontspring}px`}
                      offsettop={`${100-0.5*style.fontspring}px`}
                      onClick={(e)=>{this.tornadoclicked(e)}}
                     >&#127786;</EmojiGlamor>
                   )
                 }
               </Motion>
               <Motion style={{fontspring: spring(mobxStore.tornadoplaceholdervisible ? 100 : 0)}}
                onRest={this.tornadoplaceholderfinished()}
               >
                  {style =>
                    (
                      <div>
                        <EmojiGlamor
                         size={`${style.fontspring/5}px`}
                         offsetleft={`${100-0.5*style.fontspring}px`}
                         offsettop={`${100-0.5*style.fontspring}px`}
                         shape={`${style.fontspring}px`}
                        >whee!!!</EmojiGlamor>
                      </div>
                    )
                  }
                </Motion>
            </div>
          </FlexRow>
          <br/>
        </AlignContainer>
      </FlexContainer>
    )
  }
}

export default EmojiMagic