How to Render component many times in react js on input value - reactjs

Question

Problem: How to Render component many times, when i give input value in input box (Eg : If i enter 5 in input box Hello World Should render 5 times
React Interview Question .

Answer 1

This is pretty straight-forward and there are loads of ways about going about this.
Here's just one: new Array(number).fill(<Component />)
As with any of possibilities, you the developer, will have to justify various decisions.
I have opted to fill a new Array(n) of length n.
I would need some kind of error checking to stop users entering dumb values ("" would be such a value)
Other error: checking
min - guard against negative values (perhaps max would also be logical)
step - guard against decimal values (how could one get 2.5 elements after all?!)
type="number" - guarding against unparsable inputs like strings
// Get a hook function
const {useState} = React;
const Component = () => {
return <div>Hello World</div>
}
const Example = () => {
const [howMany, setHowMany] = useState(1);
const allComponents = new Array(howMany).fill(<Component />)
return (
<div>
<input type="number" step={1} min={0} value={howMany} onChange={(event) => {
const newValue = event.target.value
const parsedValue = parseInt(newValue)
if (parsedValue < 0 || isNaN(parsedValue)) {
console.warn("Cannot set");
// Do some error handling
return
}
console.log("setting", parsedValue)
setHowMany(parsedValue)
}} />
<div>
{allComponents.map((elem, index) => (
<React.Fragment key={index}>
{elem}
</React.Fragment>
))}
</div>
</div>
);
};
// Render it
ReactDOM.createRoot(
document.getElementById("root")
).render(
<Example />
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>