Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Bug] react

tengo este pequeño codigo que guarda el color de fondo

const [containerColor, setContainerColor] = useState(() => {
    const storedColors = JSON.parse(localStorage.getItem("containerColor")) || [];
    if(storedColors.length !== categoryList.length){
      return categoryList.map((item) => item.color)
    }
    return storedColors
  })
  
  useEffect(() => {
    // Cuando los colores cambian, guárdalos en el localStorage
    localStorage.setItem("containerColor", JSON.stringify(containerColor));
  }, [containerColor]);

  function handleColor(event, index) {
    const color = event.target.value;
    const updateColors = [...containerColor];
    updateColors[index] = color;
    setContainerColor(updateColors);
  }

y quiero ponerlo en esta seccion pero la el rgba no coje

<SectionCategory key={i} style={{backgroundColor:`rgba(${containerColor[i]},.7)`}}></SectionCategory>
1 respuesta

Hola Hernán,

Parece que el problema puede estar en cómo estás almacenando y recuperando los colores de tu estado y localStorage. Si estás guardando los colores como una cadena de texto RGBA completa (por ejemplo, "255,0,0,0.7"), entonces deberías poder insertarlo directamente en tu estilo de fondo.

Sin embargo, si estás almacenando los colores como un array de números (por ejemplo, [255,0,0]), entonces necesitarás convertir esos números en una cadena de texto antes de poder usarlos en tu estilo de fondo.

Aquí tienes un ejemplo de cómo podrías hacerlo:

<SectionCategory key={i} style={{backgroundColor:`rgba(${containerColor[i].join(",")},.7)`}}></SectionCategory>

En este ejemplo, estoy usando el método join() de JavaScript para convertir tu array de números en una cadena de texto. Esto solo funcionará si containerColor[i] es un array de números.

Espero que esto te ayude a resolver tu problema. Recuerda que esta solución asume que estás almacenando tus colores como arrays de números. Si no es así, puede que necesites ajustar tu código para que funcione correctamente.

Espero haber ayudado y ¡buenos estudios!