Update the array values according to user input

Question

I try to implement an component in my application. There i want to set the numbers of rendered paragraphs according to the numbers set by the user. For example if user selects 3 should appear 3 paragraphs, but if user after that select 1, the number of paragraphs should decrease to 1. This is my code:

const Nr = () => {
  const [nr, setNr] = useState([]);
  function onChange(value) {
    console.log("changed", value);
    setNr([...nr, value]);
  }

  return (
    <div>
      {nr.map(i => {
        return <p>{i}</p>;
      })}
      <InputNumber min={1} max={10} onChange={onChange} />;
    </div>
  );
};
export default Nr;

But now if select 3 the paragraphs are genereted ok, but if after that i select 2, the paragraphs does not decrease, but increase. How to solve this?
demo: https://codesandbox.io/s/cranky-glitter-9d7sn?file=/Number.js:163-490

I have checked your codesandbox, when I enter 3 there is only one line render with number 3, is it expected? — Tony Nguyen
– Tony Nguyen, Commented Jun 9, 2020 at 11:52
@TonyNguyen, no, thanks for this. It should be 3 paragraphs. — Asking
– Asking, Commented Jun 9, 2020 at 11:53

lndgalante · Accepted Answer · 2020-06-09 11:52:49Z

1

A good approach is to generate a new array using the incoming value (from the onChange function) as the array length.

Codesandbox: https://codesandbox.io/s/proud-http-r49px?file=/Number.js:163-526

const Nr = () => {
  const [nr, setNr] = useState([]);

  function handleInputChange(value) {
    const newArray = Array.from({ length: value }, (_, index) => index + 1);
    setNr(newArray);
  }

  return (
    <div>
      {nr.map(i => (
        <p key={i}>{i}</p>
      ))}
      <InputNumber min={1} max={10} onChange={handleInputChange} />;
    </div>
  );
};

answered Jun 9, 2020 at 11:52

lndgalante

4202 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Junius L Over a year ago

meta.stackoverflow.com/questions/338537/…

Collectives™ on Stack Overflow

Update the array values according to user input

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related