CODEWITHSUNDEEP
reactjsnext.js
Dotman
Dotman

Reputation: 123

Component Rerendering On Change NextJS

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.

Upvotes: 0

Views: 114

Answers (1)

Victor Orlyk
Victor Orlyk

Reputation: 1843

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

Upvotes: 1

Related Questions