Quiero agregar un ColorBox de componente secundario a cambio del componente principal ColorBoxContainer según el número de veces que hay un valor en el estado noOfBoxes: 16 . Estoy tratando de usar for-loop pero supongo que el código es incorrecto. ¿Alguien puede ayudarme, cómo lograr esto?
import React, { Component } from 'react'; import ColorBox from './ColorBox'; class ColorBoxContainer extends Component { constructor(props) { super(props); this.state = { noOfBoxes: 16 } } render(){ return ( <div> {for(i=0;i<this.state.noOfBoxes;i++){ <ColorBox /> }} </div> ) } } export default ColorBoxContainer;Cree una matriz con la longitud del elemento dada y asígnela a su elemento:
<div> {Array(this.state.noOfBoxes).fill().map((_, index) => ( <ColorBox key={index} /> ))} </div> import React, { Component } from 'react'; import ColorBox from './ColorBox'; class ColorBoxContainer extends Component { constructor(props) { super(props); this.state = { noOfBoxes: 16 } } render(){ return ( <div> { Array(this.state.noOfBoxes).fill().map((_,i) => <ColorBox key={i}/>) } </div> ) } } export default ColorBoxContainer;return Array.from({length: this.state.noOfBoxes}, (item, index) => <ColorBox /> )