Условный рендеринг всегда ложный

Question

У меня есть компонент, который отвечает за отображение списка категорий.В нем я объявляю const с именем "thereAreCategories", который должен быть истинным, когда есть какие-либо категории, переданные из компонента Categories.на данный момент, это ложно все время и показывает пункт «Пожалуйста, добавьте новую категорию».

render() {
        const { categories } = this.props;
        const thereAreCategories = categories.length > 0
        return (

            <div className="category-list">
                {
                    thereAreCategories ?

                            <ul>
                                {categories.map(category =>
                                    < li
                                        key={category.id}
                                        onClick={() => this.toggle(category.id)}
                                        style={!category.isToggled ?
                                            { borderColor: '' } : { border: '2px solid red' }}>
                                        {category.term}
                                    </li>)}
                            </ul>

                        :

                            <p>Plese add a new category</p>

                }

                <button onClick={this.logProps}>Props</button>
            </div>
        );
    }

Состояние находится в компоненте Категории.