EmojiChoose is not rendering the variable (it's just blank)

emojichoosenotworking.jsx

// https://github.com/diegohaz/arc/wiki/Atomic-Design
import React, { Component } from 'react'
import { Badge, IconButton, Heading, Paragraph, ParagraphHolder, PrimaryNavigation, Blockquote } from 'components'
import styled from 'styled-components'
import ReactDOM from 'react-dom'

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;
`

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

const EmojiList = [
  ["grinning face with smiling eyes", '01F601'],
  ['face with tears of joy', '01F602'],
  ['smiling face with open mouth', '01F603'],
  ['smiling face with open mouth and smiling eyes', '01F604'],
  ['smiling face with open mouth and cold sweat', '01F605'],
  ['smiling face with open mouth and tightly-closed eyes', '01F606'],
  ['winking face', '01F609'],
  ['smiling face with smiling eyes', '01F60A'],
  ['face savouring delicious food', '01F60B'],
  ['relieved face', '01F60C'],
  ['smiling face with heart-shaped eyes', '01F60D'],
  ['smirking face', '01F60F'],
  ['unamused face', '01F612'],
  ['face with cold sweat', '01F613'],
  ['pensive face', '01F614'],
  ['confounded face','01F616'],
  ['face throwing a kiss', '01F618'],
  ['kissing face with closed eyes', '01F61A'],
  ['face with stuck-out tongue and winking eye', '01F61C'],
  ['face with stuck-out tongue and tightly-closed eyes', '01F61D'],
  ['disappointed face', '01F61E'],
  ['angry face', '01F620'],
  ['pouting face', '01F621'],
  ['crying face', '01F622'],
  ['persevering face', '01F623'],
  ['face with look of triumph', '01F624'],
  ['disappointed but relieved face', '01F625'],
  ['fearful face', '01F628'],
  ['weary face', '01F629'],
  ['sleepy face', '01F62A'],
  ['tired face', '01F62B'],
  ['loudly crying face', '01F62D'],
  ['face with open mouth and cold sweat', '01F630'],
  ['face screaming in fear', '01F631'],
  ['astonished face', '01F632'],
  ['flushed face', '01F633'],
  ['dizzy face', '01F635'],
  ['face with medical mask', '01F637']
]

const EmojiChoose = (match) => {
  console.log('inside EmojiChoose and match is ', match);
  const Matchname = match[0];
  const Matchemoji = "\\" + match[1];
  return(
    <div>
      {Matchname}
    </div>
  )
}


class EmojiSelector extends Component{
  constructor(props){
    super(props)
    this.state = {
      matcharray: []
    };
  }

  componentDidMount(){
    console.log('emoji adder mounted!');
  }

  componentWillReceiveProps(nextProps){
    console.log('inside componentWillReceiveProps of searchEmoji: ', nextProps.searchEmoji);
    var matcharray = [];
    var listitemmatches = false;
    EmojiList.forEach(listitem=>{
      let listitemarray = listitem[0].split(" ");
      listitemmatches = false;
      listitemarray.forEach(wordinlist=>{
        var wordsmatch = true;
        for(var x=0; x<nextProps.searchEmoji.length; x++){
          if(nextProps.searchEmoji[x]!=wordinlist[x]){
            wordsmatch = false;
          }
          if(x===nextProps.searchEmoji.length-1){
            if(wordsmatch===true){
              listitemmatches = true;
            }
          }
        }
      });
      if (listitemmatches === true){
        matcharray.push(listitem);
      }
    });
    console.log('here are the matching words: ', matcharray);
    this.setState({
      matcharray: matcharray
    })
  }



  render(){
    let emojiChoice;
      if(this.state.matcharray.length!=0){
            emojiChoice = this.state.matcharray.map((match,i) => {
              return (
                <EmojiChoose key={i} match={match}/>
              );
            });
      }

     return (
       <div>
        {emojiChoice}
       </div>
     );
  }
}

export default EmojiSelector