Component Rerendering On Change NextJS

Question

I have a simple input with an onchange function that takes the value and sets the state for whichever one I want. I have used an input onChange before in other parts of the code, but this issue has never happened before. Every time I would type in a number in the input, it deselects the input and doesn't let me input anymore. This is the code for the input including the state set;=

  const [calc, setCalc] = useState("");

  const [iotInitial, setIotInitial] = useState(0);
  const [iotCont, setIotCont] = useState(0);
  const [iotGrowth, setIotGrowth] = useState(0);
  const [iotSubmit, setIotSubmit] = useState(false)
 
  const Calculator = () => {

    if (calc === "1") {
      return (
        
        <div className="text-black p-2">
          <h1 className="text-lg">Investment Over Time</h1>
          <div className="">
            <div className="flex flex-wrap gap-x-5">
              <div className="flex flex-col">
                <label>Initial Investment</label>
                <input defaultValue={iotInitial} value="initial" type="number" className="rounded" onChange={(e) => setIotInitial(e.target.value)}/>
              </div>
              <div className="flex flex-col">
                <label>Contributions (monthly)</label>
                <input defaultValue={iotCont} value="cont" type="number" className="rounded" onChange={(e) => setIotCont(e.target.value)}/>
              </div>
              <div className="flex flex-col">
                <label>Growth Time (years)</label>
                <input defaultValue={iotGrowth} value="growth" type="number" className="rounded" onChange={(e) => setIotGrowth(e.target.value)}/>
              </div>
              <button className="bg-blue-300 hover:bg-blue-500 px-5 rounded" onClick={() => {setIotSubmit(true)}}>
                Submit
              </button>
            </div>
            {iotSubmit && 
            <div>
              {iotInitial}
              {iotCont}
              {iotGrowth}
            </div>
            }
          </div>
        </div>
      );
    } else if (calc === "2") {
      return (
        <div className="text-black p-2">
          <h1 className="text-lg">Risk Analysis Using Average True Range</h1>
          <p>Coming Soon</p>
        </div>
      );
    } else if (calc === "3") {
      return (
        <div className="text-black">
          <h1 className="text-lg">Hello</h1>
          <p>{calc}</p>
        </div>
      );
    }
  };

This component keep rerendering and I don't know why. Any help would be useful.

The inital value of calc is "" and You don't set it anywhere (with setCalc). — Vucko
– Vucko, Commented Jan 18, 2023 at 21:12

Victor Orlyk · Accepted Answer · 2023-01-19 18:08:33Z

1

you use value="initial" which is a string and what you should do is

...
 <input
        defaultValue="0"
        value={iotCont}
        type="number"
        onChange={(e) => setIotCont(e.target.value)}
      />
...

The problem is that input uses value attribute as what it is gonna display

or you may simply remove value from your input to make it one way binding

edited Jan 19, 2023 at 18:08

answered Jan 18, 2023 at 21:16

Victor Orlyk

1,9734 gold badges22 silver badges30 bronze badges

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

Collectives™ on Stack Overflow

Component Rerendering On Change NextJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related