Как изменить фон списка динамических массивов при выборе города

#javascript #css #reactjs

Вопрос:

             <div className="images-container">
              {cities?.map((city) => (
                <>
                  {city?.isActive amp;amp; (
                    <>
                      {city?.images.map((image) => (
                        <div className="img-block">
                          <img className="cardd-img" src={image.image} alt="DGNet" />
                          <p className="paragrafo">{image?.paragraph}</p>
                        </div>
                      ))}
                    </>
                  )}
                </>
              ))}
            </div>

У меня есть список городов ОС, и мне нужно изменить фон, когда выбран город ОС, вот что у меня есть

 const [cities, setCities] = useState([
    {
      name: "Divinópolis",
      isActive: false,
      images: [
        {
          image: imgLogoTIVerde,
          paragraph: "Special Sales e Technical Support",
        }
      ],
    },
    {
      name: "Nova Olímpia",
      isActive: false,
      images: [
        {
          image: imgLogoLivitech,
          paragraph: "Special Sales e Technical Support",
        }
      ],
    },

    
      const states = [
    {
      name: 'minas gerais',
      cities: ['Divinópolis', '']
    },
    {
      name: 'paraná',
      cities: ['Nova Olímpia', '']
    }
  ]
  
    function handleChangeCity(name) {
    const cityChanged = cities.map((city) => {
      city.isActive = false;

      if (city.name === name) city.isActive = true;
      if (city.name === name) city.arrowActive = true;

      return city;
    });

    setCities(cityChanged);
  }

   
              <div className="scroll">
              
              {states?.map(state => (
                <div key={state.name} className="cidade">
                  <header className="header">
                    <h1 className="font-bold">{state.name}</h1>
                  </header>
                  {state.cities.map(city => (
                    <>
                    <div className="city-block">
                      <label className="label" for="content">
                        {city}
                      </label>
                      <input type="radio" name="radio" className="single" onClick={() => handleChangeCity(city)} />
                    </div>
                    </>
                  ))}
                </div>
              ))}

            </div>

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

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

1. Какой раздел вы хотите оформить? Так ли это city-block ?

2. @DanZuzevich да, это тот, на котором показаны названия городов

3. Работает ли мой ответ? Только что опубликовал один.

4. @DanZuzevich это не сработало

Ответ №1:

Не было на 100% ясно, в какой div вы хотите добавить цвет фона, но эта логика должна работать для вас.

 {state.cities.map(city => (
    <>
        <div className="city-block" style={{ backgroundColor: city.isActive ? 'blue' : 'none' }}>
            <label className="label" for="content">
            {city}
            </label>
            <input type="radio" name="radio" className="single" onClick={() => handleChangeCity(city)} />
        </div>
    </>
))}

1. Очевидно, стилизуйте его в любой цвет, какой вы хотите, это просто пример.

2. Это не сработало, фон не изменился

3. Кажется , что вы составляете карту насквозь state.cities , в то время как вы должны просто cities составлять карту . В своем handleChangeCity вы обновляете cities состояние. Я не уверен, что state это такое.

4. Я отредактировал вопрос с помощью div, который показывает изображение при нажатии на город. Вот как это работает: постановка—setorazul.netlify.app/agente

Ответ №2:

Вы можете передать другое имя класса, если оно активно или нет, или использовать реквизиты стиля. Пример:

 <div className={city.isActive ? 'class-with-backgroud-1' : 'class-with-backgroud-2'}>
  ...
</div>

или:

 <div style={{ backgroundColor: city.isActive ? 'color-1' : 'color-2' }}>
  ...
</div>