Условный вывод HTML в jsx

Question

Я пытаюсь изменить какой-то jsx, который в данный момент просто зацикливается и выводит jsx. Когда я пытаюсь изменить цикл на вывод, основанный на значении в объектах массива, я получаю ошибку в коде, поскольку это происходит так, как яя пытаюсь вывести html.

В массиве есть значение с именем Group, и если имя группы отличается от имени последней группы, выведите метку для отображения нового имени группы

Я должен начать с того, что ..

<Container className="float-left">
{ 
    this.Store.SearchResults.map( template =>                       
    <TemplateCard
        key={template.Name}
        ....
    >                       
    { template.Name }
    </TemplateCard>)                    
}
</Container>

Что я хотел бы сделать, это ...

<Container className="float-left">
{ 
    this.Store.SearchResults.map( template =>
    {
            var lastGroup;
            if(template.Group !== lastGroup ){
                    // output group name
                    <div>
                    <Label>{template.Group}</Label>
                    </div>
            }
    }                   
    <TemplateCard
        key={template.Name}
        ....
    >                       
    { template.Name }
    </TemplateCard>)                    
}
</Container>

Это дает ошибку .. - Неожиданный токен, ожидаемый ","

Answer 1

Есть много проблем с вашим кодом. Не уверен, что вам нужно использовать карту дважды для вашего случая использования, но поскольку .map() должен возвращать один элемент, вы должны обернуть все это в React Fragment и использовать его как -

this.Store.SearchResults.map( (template, index) =>
        {
            var lastGroup; // Make sure to initialize it with some value
            return (
             <React.Fragment key={index}>
              {template.Group !== lastGroup &&
                (<div>
                <Label>{template.Group}</Label>
                </div>)
              }
              <TemplateCard
                key={template.Name}
                ....
              >                       
                { template.Name }
              </TemplateCard>                  
            </React.Fragment>);
        }

Дополнительные улучшения / вещи, о которых следует помнить -

1. Добавьте оператор возврата внутри .map(), если выполняете операции перед возвратом элемента JSX.
2. Добавьте ключ кэлемент внутри .map().
3. Дважды проверьте скобки, если вы что-то упустили. Может быть немного грязно, если вы новичок в JSX

Answer 2

Все, спасибо за вашу помощь.

Я не смог заставить это работать, так как Джаякумар сказал, что мне, вероятно, нужно опубликовать больше кода. Во всяком случае, мне удалось решить другой путь на данный момент. Решено наличием отдельных массивов и новым разделом под этим. Это может вернуться как проблема позже, но сейчас это будет так.

Спасибо

Answer 3

Вы можете использовать троичный оператор, который будет визуализировать div, если условие выполнено, и в противном случае отобразить ноль:

{template.Group !== lastGroup ?
    <div>
        <Label>{template.Group}</Label>
    </div>
: null}