Не возвращает правильный результат в компоненте React с оператором if elseif

Question

Я использую выпадающее меню, чтобы выбрать разные уровни для игры на память. Я использую оператор if / elseif, потому что здесь задействованы три переменные. Консоль регистрирует правильные результаты из компонента Gameboard, но я не могу заставить его загрузить правильное имя уровня в компоненте Title, и я не знаю почему. Я полагаю, мне нужен объект состояния, чтобы он работал правильно.

Я попытался сгенерировать текст с помощью CSS, преобразовать объект в массив (во втором пункте меню это превращает каждую букву заголовка в элемент массива, а затем взорвать приложение) и даже попытался пройти уровень title в компоненте title, но ничего не сработало. Я все еще выясняю тонкости работы с компонентами. Спасибо!

Это if / elseif

let gameLevel = <div>Level One</div>;
let cards = 18;
let colWidth = 2;

const level = (this.props.type);
        console.log(level);
        if (level === 'first') {
            gameLevel = <div>Level One</div>;
            cards = 18;
            colWidth = 2;
        } else if (level === 'second') {
            gameLevel = <div>Level Two</div>;
            cards = 12;
            colWidth = 3;
        } else if (level === 'third') {
            gameLevel = <div>Level Three</div>;
            cards = 8;
            colWidth = 3;
        } else if (level === 'fourth') {
            gameLevel = <div>Level Four</div>;
            cards = 18;
            colWidth = 2;
        } else if (level === 'fifth') {
            gameLevel = <div>Level Five</div>;
            cards = 12;
            colWidth = 3;
        } else if (level === 'sixth') {
            gameLevel = <div>Level Six</div>;
            cards = 8;
            colWidth = 3;
        } else {
            console.log(gameLevel, cards, colWidth);
        }return gameLevel;

Это компонент заголовка (я также пропустил реквизиты вместо newLevel, пытаясь это исправить)

const title = (newLevel) => {
    console.log(newLevel);
    const changeLevel = Object.keys(newLevel);
    console.log(changeLevel);

    return (
        <div className={classes.Title}>
            {changeLevel}
        </div>
    )
};




This is the gameboard component (I left out the cards)

class Gameboard extends Component {
state = {
        levels: {
            first: 'Level One',
            second: 'Level Two',
            third: 'Level Three',
            fourth: 'Level Four',
            fifth: 'Level Five',
            sixth: 'Level Six'
        },

        cardCount: {
            first: 18,
            second: 12,
            third:8,
            fourth: 18,
            fifth: 12,
            sixth: 8
        },

        width: {
            first: 2,
            second: 3,
            third: 3,
            fourth: 2,
            fifth: 3,
            sixth: 3
        }
    };
    changeBoard = (type) => {
        const newLevel = this.state.levels[type];
        const newCount = this.state.cardCount[type];
        const newWidth = this.state.width[type];
        console.log(newLevel);
        console.log(newCount);
        console.log(newWidth);

    return <Title levels={newLevel}/>;

render () {
        return (
            <div>
                <Row>
                    <Col className={classes.stats}>
                        <Menu changed={this.changeBoard}/>
                    </Col>
                    <Col>
                        <p className={classes.stats}>Matches<br/>0</p>
                    </Col>
                    <Col>
                        <p className={classes.stats}>Attempts<br/>0</p>
                    </Col>
                    <Col>
                        <p className={classes.stats}>Accuracy<br/>0</p>
                    </Col>
                    <Col>
                        <p className={classes.stats}>Wins<br/>0</p>
                    </Col>
                    <Col className={classes.stats}>
                        <button type='button' className='btn btn-danger btn-sm'>Reset</button>
                    </Col>
                </Row>
                <Timer/>
                <Title levels={this.state.levels}/>
//cards here
 </div>
        )
    }
};
export default Gameboard;

и в рендере ...

<Title levels={this.state.levels}/>

Я ожидаю увидеть «Уровень один» в компоненте заголовка при выборе «LevelOne» в меню, «Уровень два» при выборе «Второй уровень» и так далее. Вместо этого я получаю статический «Уровень один», «Уровень один1», все заголовки уровней одновременно, «Уровень один», отображаемый 23 раза из-за объектов состояния, или приложение взрывается.