Quiero darle a cada div o childNodes un color diferente usando una matriz de colores. Pero solo el último color de la matriz se le da a todos los divs o childNodes.
¿Puede decirme cómo podemos diseñarlos dinámicamente mediante el mapping o forEach nodes, childNodes, inmersiones y colores en reactjs ?
Puedes ver la demostración: enlace de codesandbox
const containerRef = useRef() useEffect(()=>{ containerRef.current.childNodes.forEach(item=>{ ['green','blue','green','yellow','orange'].map(colors => { item.style.background = colors }) }) }) <div ref={containerRef } className="h-96 w-full flex items-center gap-x-6 border border-black"> <div className='w-20 h-20 border border-black'>one</div> <div className='w-20 h-20 border border-black'>two</div> <div className='w-20 h-20 border border-black'>three</div> <div className='w-20 h-20 border border-black'>four</div> <div className='w-20 h-20 border border-black'>five</div> </div>No necesita map los colores, solo necesita asignar cada elemento con un índice de color correspondiente.
import "./styles.css"; import React, { useEffect, useRef } from "react"; export default function App() { const containerRef = useRef(); const colors = ["green", "blue", "green", "yellow", "orange"]; useEffect(() => { containerRef.current.childNodes.forEach((item, i) => { item.style.background = colors[i]; }); }); return ( <div ref={containerRef} className="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> ); }Aquí está mapeando nuevamente los colors , para cada item en los nodos secundarios, lo que da como resultado la asignación del último color a cada div .
Deberá usar el index del elemento en la lista childNodes y acceder al color de ese index desde la matriz de colors .
Enlace de CodeSanbox: https://codesandbox.io/s/fragrant-frost-3v0v76