Добавить className в первый div массива в React

Я пытаюсь добавить className к первому div массива, который я отображаю в React. Я новичок в реакции, поэтому синтаксис меня ставит в тупик.

Вот мое исходное состояние:

export default class EventList extends Component {


  state = {
    users: [],
    events: [],
    shownForm: null,
    hideNewForm: true,
    hideEditForm: true,
    currentUserId: this.props.getCurrentUser(),
    editTitle: "",
    editDate: "",
    editSynopsis: "",
    editLocation: "",
    editId: ""
  }

Это неработающая функция, но как я пытаюсь использовать условный оператор для массива:

addFirstClass =() => {
    if (this.state.events === this.state.events[0]){
    className = "card-body details"
    }else{
    className = "card-body details coral"
    }
  }

Вот где я визуализирую div в DOM:

render() {
return(   
<section className = "events">
   {this.state.events.map(event => (
      <div key = {event.id} className = "card">
        <div className = {this.addFirstClass()}>
          <p className = "card-details">
           Synopsis:{event.synopsis}</p> 
        </div>
       </div>
</section>
    )
   }

Я искал другие темы, но, похоже, не могу понять, как это сделать. Любая помощь приветствуется!

reactjs

01.12.2018 20:10

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

866

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете использовать динамическое имя класса, я надеюсь, что эта работа

<section className = "events">
   {this.state.events.map(event => (
      <div key = {event.id} className = {this.state.events[0].id === event.id ? 'card-body details' : 'card-body details coral'}>
        <div className = {this.addFirstClass()}>
          <p className = "card-details">
           Synopsis:{event.synopsis}</p> 
        </div>
       </div>
</section>

<div key = {event.id} className = {this.state.events[0].id === event.id ? 'card-body details' : 'card-body details coral'}>

Здесь я использую сокращение JavaScript, если, чтобы проверить, соответствует ли this.state.events[0].id текущему event.id, добавьте эти классы, иначе добавьте другие классы

Блестяще! Это мне очень помогло! Я надеюсь, что когда-нибудь научусь лучше обдумывать синтаксис. Большое спасибо!

— 01.12.2018 20:31

01.12.2018 20:13

Попробуйте это (используйте встроенный счетчик на карте и спросите, равен ли счетчик 0 ... иначе ...):

 <section className = "events">
   {this.state.events.map((event, i) => (
      <div key = {event.id} className = {i===0 ? 'card-body details' : 'card-body details coral'}>
        <div className = {this.addFirstClass()}>
          <p className = "card-details">
           Synopsis:{event.synopsis}</p> 
        </div>
   </div>
</section>

Или что-то вроде противоположного и чуть более плавного:

 <section className = "events">
   {this.state.events.map((event, i) => (
      <div key = {event.id} className = {'card-body details' + (i !== 0 ? ' coral' : '')}>
        <div className = {this.addFirstClass()}>
          <p className = "card-details">
           Synopsis:{event.synopsis}</p> 
        </div>
   </div>
</section>

02.11.2020 19:51

Другие вопросы по теме

Центрирование компонента React не работает

Динамически загружать иконки в компонент

Получение вставленного символа и позиции, в которой он был вставлен из текстового поля в React

Обойти несколько строк в Flow

Реакция: импорт имени класса CSS не работает

Используем React и пытаемся вывести значение точно из {this.state.value}

React js не рендеринг через JSON из rest api

Текстовые вводы React Auto RTL

Как я могу отображать ошибки в React; я получаю ошибки массива от redux?

Не может получить доступ к индексу массива в состоянии ReactJS

Добавить className в первый div массива в React

Ответы 2

Другие вопросы по теме

Похожие вопросы