ReactJS: ошибка синтаксического анализа: неожиданный токен, ожидается "}"

Question

Я работаю над приложением React и использую Redux для хранения состояния. У меня есть следующий код:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { increaseCategoryRank, decreaseCategoryRank } from '../../redux/menu/menu.actions';
import './category-arrows.styles.scss';

class CategoryArrows extends Component {

    render() {

        const { category } = this.props;
        const categoryClicked = true;
        const initialRank = category.rank;

        return (
            <div className="arrows-container">
                <div className="up-arrow" onClick={
                    (initialRank) =>
                    this.props.increaseCategoryRank(category, categoryClicked)

                    if(initialRank === -1) {
                        this.props.menu.map(menuCategory => menuCategory._id !== category._id ? this.props.increaseCategoryRank(menuCategory, !categoryClicked) : null)

                    } else {
                        return null;
                    }
                }></div>
                <div className="category-rank">
                    <p>{category.rank}</p>
                </div>
                <div className="down-arrow" onClick={() => this.props.decreaseCategoryRank(category,  categoryClicked)}></div>
            </div>
        )
    }
}

const mapStateToProps = state => ({
    menu: state.menu
})

export default connect(mapStateToProps, { increaseCategoryRank, decreaseCategoryRank } )(CategoryArrows);

Когда нажата кнопка up-arrow div, я вызываю функцию. Однако я получаю следующую ошибку:

Я не уверен, почему я получаю эту ошибку или как ее устранить. Любые идеи приветствуются.

Answer 1

Похоже, у вас есть свисающее утверждение if. Либо используйте скобки с функцией стрелки, либо используйте троичное выражение.

onClick={(initialRank) => { //<-- add brace bracket
    this.props.increaseCategoryRank(category, categoryClicked)
    //with no brace brackets, function would end on the line above. 
    //The rest is dangling, hence the error
    if(initialRank === -1) {
        this.props.menu.map(menuCategory => menuCategory._id !== category._id ? this.props.increaseCategoryRank(menuCategory, !categoryClicked) : null)

    } else {
        return null;
    }
}}