Как вернуть значения из ComponentWillMount, а затем использовать эти значения в методе рендеринга?

Question

Могу ли я использовать переменные в моем рендере, которые я установил в ComponenetWillMount! Вот код, но он не работает, он показывает мне, что все переменные не определены. Я знаю, что это неправильно, но какое самое чистое решение я могу использовать, чтобы это исправить.

class ItemBoard extends Component {

    componentWillMount(){
        if (this.props.type == "expense"){
            type = "expenses"
            percentage = this.props.percentage
            amount     = `-${this.props.amount}`
        }
        else{
            type = "income"
            percentage = ' '
            amount     = `+${this.props.amount}`
        }
        return [type,amount,percentage]
    }
    render(){
        var type,percentage,amount;
        return (
            <div className={`budget__${type} clearfix`}>
                <div className={`budget__${type}--text`}>{type}</div>
                <div className={`right ${type === "expense" ? `clearfix` : ``}`}>
                    <div className={`budget__${type}--value`}>{amount}</div>
                    {type === "expenses" ? <div className={`budget__expenses--percentage`}>{percentage}</div> : ""}
                </div>
            </div>
        )
    }
}