Entonces, dado un número (por ejemplo, 30), obtenga TODOS los números entre él y 0 e imprímalo en la pantalla
En mi caso, no puedo usarlo con bucles for o while, porque ya estoy dentro de uno y eso se considera un bucle inalcanzable.
Necesito mostrar estos números dentro de una <option></option>
Sé que puedo usar un range con una sola entrada, pero creo que es más claro con <option>
const TodoApp = () => { const items = [ { id: "877635284991-9", name: "ex3", quantity: 12 } ] return ( <div> <div> <select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> </select> </div> </div> ) } ReactDOM.render(<TodoApp />, document.querySelector("#app")) <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app"></div>Puede crear una matriz y asignar los valores a los elementos <option> .
const { useState } = React; const arrayOfSize = (size, fn) => Array.from(new Array(size), (_, i) => fn(i)); const items = [{ id: '877635284991-9', name: 'ex3', quantity: 12 }]; const TodoApp = (props) => { const { items } = props; const [selectedItem, setSelectedItem] = useState(items[0]); return ( <div> <select> { arrayOfSize(selectedItem.quantity, i => ( <option key={i + 1} value={i + 1}>{i + 1}</option>) ) } </select> </div> ); }; ReactDOM.render(<TodoApp items={items} />, document.querySelector('#react')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>Aquí hay un ejemplo completo:
const { Fragment, useState } = React; const arrayOfSize = (size, fn) => Array.from(new Array(size), (_, i) => fn(i)); const items = [{ id: '877635284991-9', name: 'ex3', quantity: 12 }, { id: '877635284991-0', name: 'ex4', quantity: 6 }]; const QuantitySelector = (props) => { const { value } = props; return ( <select> { arrayOfSize(value, i => ( <option key={i + 1} value={i + 1}>{i + 1}</option>) ) } </select> ); }; const TodoItem = (props) => { const { name, quantity = 0 } = props; return ( <div> <span>{name}</span> <QuantitySelector value={quantity} /> </div> ); }; const TodoItems = (props) => { const { items } = props; return ( <Fragment> { items.map(item => ( <TodoItem {...item} /> )) } </Fragment> ); }; const TodoApp = (props) => { const { items = [] } = props; return ( <div id="app"> <TodoItems items={items} /> </div> ); }; ReactDOM.render(<TodoApp items={items} />, document.querySelector('#react')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>Puede crear arreglos del tamaño requerido usando Array.from ( MDN doc ).
Array.from({length:3}) creará [undefined,undefined,undefined] .
El segundo argumento opcional de Array.from es una devolución de llamada de mapa, cuyo segundo argumento (índice) se puede usar para su escenario.
Prueba algo como:
Array.from({length: +items.quantity}, (element, index)=> { return index; // add option tag here });¿Qué tal una función recursiva?
const getOptions = (options, value, i = 1) => { let newOption = <option>{i}</option>: if (i != value) { return getOptions ([...options, newOption], value, i++) } else { return options: } } getOptions([], yourVal, 1):