So given a number (ex: 30), get ALL the numbers between it and 0 and print it on the screen
In my case I can't use it with a for or while loops, because i'm already inside one and that's considered an unreachable loop
I need to display these numbers inside an <option></option>
I know I can use a range with a single input, but I think it's clearer with <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>You could create an array and map the values to <option> elements.
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>Here is a full example:
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>You can create arrays of required size using Array.from (MDN doc).
Array.from({length:3}) will create [undefined,undefined,undefined].
The 2nd optional argument of Array.from is a map callback, whose 2nd argument (index) can be used for your scenario.
Try something like:
Array.from({length: +items.quantity}, (element, index)=> {
return index; // add option tag here
});
How about a recursive function?
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):