Выполните расчет в компоненте более высокого порядка в reactJS

У меня есть приложение для реагирования, в котором я хочу выполнить условную проверку, а заданная опора в определенном процентном соотношении является заданным значением.

На данный момент я визуализирую компонент Match в своем основном компоненте, например,

                <Match 
                inputName = {this.state.inputName}
                inputSname = {this.state.inputSname}
                percentage = {this.state.percentage}
                result = {this.state.result}
                show = {this.state.showResult}
                />

Я хочу проверить процентное соотношение компонента соответствия, поэтому у меня есть компонент MatchWrapper, который является компонентом более высокого порядка, дающим дополнительную поддержку моему следующему компоненту.

import React, {Component} from 'react'
const MatchWrapper = WrappedComponent =>{
return class MatchWrapper extends Component{    
    state = {
        type: ''
    } 

    componentDidMount(){
    console.info(this.props.percentage)
    let type = ''
        switch(this.props.percentage){
            case this.props.percentage > 75:
                type = "succes";
                break;
            case this.props.percentage > 50 && 75 > this.props.percentage:
                type = "mediocre";
                break;
            case this.props.percentage < 50:
                type = "failure123";
                break;
        }
        this.setState({
            type: type
        })
    }
    render(){
    return(
     <div>
    <WrappedComponent type = {this.state.type} {...this.props}/>
</div>
)
}
}
}
export default MatchWrapper;

в моем компоненте соответствия (который является функциональным компонентом и отображает только значения)

import React, {Component} from 'react'
import './Match.css';
import MatchWrapper from '../HOC/MatchWrapper'
import './Match.css';

const match = (props) =>{


console.info(props.show)
console.info(props.type)
return(
    <div>
{props.show ?
<div>
    <h1>Hello!</h1>
    <p>{props.inputName} Du har sgu scoret en jackpot</p>
    <p>{props.inputSname} Er sgu en laks udover det sædvanelige!</p>
    <p>I har scorede hele {props.percentage} procent</p>
    <p>Jeg synes du skulle invitere hende på data med det samme</p>   
</div>  
: null} 
</div>
)
}
export default MatchWrapper(match)

Здесь я хочу занести в console.info данный тип опоры, но расчет неверен, поскольку он ничего не отображает ИЛИ базовый случай, если в операторе switch задан случай по умолчанию. Как я могу улучшить свою логику, чтобы правильно выполнять вычисления в моем HOC?

Обновлено: я подумал, что проблема в том, что мой HOC не получает никаких реквизитов, но я не уверен, почему?

Компонент любви, отображающий совпадение:

import React, {Component} from 'react';
import axios from 'axios'
import './Love.css'
import  Match from './Matches/Match'
import MatchWrapper from './HOC/MatchWrapper';

class Love extends Component{

    state= {
        inputName: '',
        inputSname: '',
        percentage: 0,
        result: '',
        showResult: false
    }

    componentDidMount(){
        console.info('hello')
    }

    findMatchHandler = () =>{
    axios.get(`https://love-calculator.p.mashape.com/getPercentage?fname=${this.state.inputName}&sname=${this.state.inputSname}`,{
        headers: {
           "X-Mashape-Key": "cZA91FBSWlmshegV4IsGJIcGoc3yp1Eq9cCjsnjMGOVB35Z1Ud",
           "Accept": "application/json"
        }
       }).then(res =>
           this.setState({
               name: res.data.fname,
               sName: res.data.sname,
               percentage: res.data.percentage,
               result: res.data.result,
               showResult: true
           })
           )
           }

render(){

      console.info(this.state.percentage)
      console.info(this.state.showResult)
        return(

            <div className = {"main-div " + (this.state.percentage > 75 && this.state.showResult ? "match " : ' ') + (this.state.percentage > 50  && this.state.percentage < 75 && this.state.showResult === true ? 'semi ' : ' ') + (this.state.percentage < 50 && this.state.showResult ? 'no-match': '')}>

                    <button onClick = {this.findMatchHandler}>Find love!</button>
                    <input type = "text" value = {this.state.inputName} onChange = {(event) => this.setState({inputName: event.target.value, showResult: false})} placeholder = "enter your name"/>
                    <input type = "text" value = {this.state.inputSname} onChange = {(event) => this.setState({inputSname: event.target.value, showResult: false})} placeholder = "enter your name"/>



                    <Match
                    inputName = {this.state.inputName}
                    inputSname = {this.state.inputSname}
                    percentage = {this.state.percentage}
                    result = {this.state.result}
                    show = {this.state.showResult}
                    />
               </div>
        )
}
}
export default Love