Dlaczego otrzymuję "nieoczekiwany token" w tym fragmencie kodu JSX? - javascript, html, reactjs, jsx, babel

mam

    return (
<p>Sort by:
<a onClick={this.toggleMenuVisibility}>
{selectedFilterText} <Chicon className="bubble-trigger-icon" name="downarrow" />
</a>
</p>
{ menuIsVisible && this.getMenuItems(productAttributes) }
);

i dostaję bardzo nieopisowe

"Nieoczekiwany znak"

wskazując na wspornik w { menuIsVisible. Masz pojęcie, na czym polega problem?

Odpowiedzi:

Nie możesz zwrócić dwóch węzłów głównych. Będziesz musiał opakować plik <p> i wyrażenie {} w div lub innym elemencie. Zrób to i powinno działać dobrze.

Źródło: doktorzy

Nawiasem mówiąc, podstawowym algorytmem Reacta jest istnienieprzeprojektowany teraz. Nowy system o nazwie „Fiber” ma wiele ulepszeń, w tym możliwość robienia tego, co chcesz zrobić. W czasie, gdy ten post został opublikowany (październik 2016 r.), Fiber nie jest dostępny. Ostatnia aktualizacja, o której słyszałem polega na tym, że celem jest osiągnięcie przez światłowód parytetu funkcji z istniejącym systemem do końca 2016 r.