How change background of an dynamic array list when a city is selected-CodePudding

            <div className="images-container">
              {cities?.map((city) => (
                <>
                  {city?.isActive && (
                    <>
                      {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>

I have a list os cities and I need to change the background when a city os selected, here is what i have

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>

At the moment when I select a city an img shows on a container, that works fine, what really need is that the background of that city div change as well, but only the celected one.

I added the code part where it shows the image when the city is selected, each city may have a different image or the same as the others

CodePudding user response：

It wasn't 100% clear what div you wanted to add the background color to, but this logic should work for you.

{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>
    </>
))}

CodePudding user response：

You can pass different className if isActive or not, or use the style props. Example:

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

or:

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