Javascript variable not storing value In ReactJS Component

Question

I'm trying to compare the current value with previous value, Which entered on the text box. But the variable not storing the value.

declaring the variable currentVal to store initial value and change currentVal value via onChange to store latest value, but its not storing the value.

I'm not sure why its happening, When I move the currentVal above function Input its storing the value and everything working fine. But I need to store the Input argument as initial value.

Here is the code below and also in codesandbox

const Input = ({ initialValue = "20" }) => {
  const [value, updateValue] = useState(initialValue);

  var currentVal = initialValue;
  const update = event => {
    console.log("currentVal at Step : 1 ::", currentVal);
    var x = event.target.value;
    if (currentVal !== x) {
      currentVal = x;
      console.log("Inside Loop :: currentVal at Step : 2 ::", currentVal);
      updateValue(currentVal);
    } else {
      updateValue(currentVal);
    }
  };
  return (
    <>
      Data :: {value} <br />
      <br />
      <input type="text" value={value} onChange={e => update(e)} />
    </>
  );
};

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1> Data Test ! </h1>
        <Input />
      </div>
    );
  }
}

Question :

Why currentVal not holding/storing the updated value ?

Dasith · Accepted Answer · 2019-02-01 06:15:38Z

2

  var currentVal = value || initialValue;

Not sure if i understand your question correctly but assuming you only want to use the initial value if its present and continue using changed value afterwards I think this is what you want to do ?

Note the initial post was later changed with a follow up question. Answer to it is in the comments below however I would put it here as well for easy reference..

It's because the component is being re-rendered on each change , think of it like the function being called on each render and only state it remembers is the state updated by using the updateValue() on the hook method. Anything else is just variables on function that gets reset/ reinitialized on each render

edited Feb 1, 2019 at 6:15

answered Feb 1, 2019 at 5:47

Dasith

1,09511 silver badges16 bronze badges

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

4 Comments

Sivasankar Over a year ago

Solution works, but my question is Why currentVal not holding/storing the updated value ?, I also revised the question.

Dasith Over a year ago

It's because the component is being re-rendered on each change , think of it like the function being called on each render and only state it remembers is the state updated by using the updateValue() on the hook method. Anything else is just variables on function that gets reset/ reinitialized on each render

Sivasankar Over a year ago

only state it remembers is the state updated by using the updateValue() ... Oh yes, Thanks

Dasith Over a year ago

Np glad it helped :)

Shalini Sentiya · Accepted Answer · 2019-02-01 05:47:29Z

I have no idea about the useState() method so i have commented this line. Text input value is not updated because input return method doesn't render after update the value from currentVal so I have passed the updateValue() method in input component from parent component, its updated the state then render the component from parent to child with updated value.

const Input = ({ initialValue = "20", updateValue }) => {
    // const [value, updateValue] = useState(initialValue);
    var value = initialValue;
    var currentVal = initialValue;
    const update = event => {
      console.log("currentVal at Step : 1 ::", currentVal);
      var x = event.target.value;
      if (currentVal !== x) {
        currentVal = x;
        console.log("Inside Loop :: currentVal at Step : 2 ::", currentVal);
        value = currentVal;
        updateValue(currentVal);
      } else {
        updateValue(currentVal);
      }
    };
    return (
     <>
        Data :: {value} <br />
        <br />
        <input type="text" value={value} onChange={e => update(e)} />
     </>
    );
  };
class App extends Component {
  constructor() {
        super();
        this.state = {
        };
        this.updateValue = this.updateValue.bind(this);
    }
    updateValue(currentVal){
      this.setState({value: currentVal})  
    }
  render() {
    return (
      <div className="App">
        <h1> Data Test ! </h1>
        <Input updateValue={this.updateValue} initialValue={this.state.value} />
      </div>
    );
  }
}

This also solved my problem, binding on parent component. Thanks

Bala Ganapathy · Accepted Answer · 2019-02-01 07:10:28Z

The Component Input holds initialValue value as 20 that assigned to currentVal and the value from input tag is assigned to currentVal inside update function then updateValue called once again it was again assigned the currentVal as initialValue 20 that's why it was not updating the currentVal,

import React, { useState, Component, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

var state = {
  currentVal: 0
};

const Input = () => {
  const [value, updateValue] = useState(20);
  const update = event => {
    var x = event.target.value;
    if (value !== x) {
      updateValue(x);
      state.currentVal = x;
    } else {
      updateValue(value);
      state.currentVal = value;
    }
  };
  return (
    <div>
      Data :: {value} || CurrentVal :: {state.currentVal} <br />
      <br />
      <input type="text" value={value} onChange={e => update(e)} />
    </div>
  );
};

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1> Data Test ! </h1>
        <Input />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Collectives™ on Stack Overflow

Javascript variable not storing value In ReactJS Component

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related