CODEWITHSUNDEEP
htmlreactjsstyled-components
webcoder
webcoder

Reputation: 1517

react styled-componens input value becomes Non when value removed

I have a RangeSlider and another input bind to it, the problem is when someone empty (remove) value from input under slider, the slider becomes white and value becomes Non as shown in screenshot attached

you can check the demo

any help please? enter image description here

Upvotes: 0

Views: 53

Answers (3)

Guillaume Richard
Guillaume Richard

Reputation: 306

I think the problem comes from your onChange function! You indiscriminately use parseInt, and parseInt can return a NaN if given a non number value ! Also, your onChange is a bit odd, when it runs(on any input change) it checks every input every time a single one has changed. Unless you want them to have some kind of connection, this is unnecessary. you can give them each the index in their onChange to access them in your state, and then use it in the onChange function. Like so.

const onChange = (event, index) => {
...etc
inputs[index].data = parseInt(e.target.value);
// fix your NaN problem around here
...etc

}

render of your component:

{data.map((item, i) => {
      const bgcolor = RangeSliderColors(item.name);
      return (
      <div
        key={i}
        style={{
          display: "flex",
          flexDirection: "column",
          marginTop: "100px"
        }}
      >
      <RangeSlider
        name={item.name}
        value={item.data}
        width={20}
        min={0}
        minValue={10}
        step={item.data > item.min ? 1 : item.min}
        max={100}
        bgcolor={bgcolor}
        onChange={() => onChange(i)} // This will let you know which one is changed.
      />
    </div>
  );
})}

Upvotes: 1

Asking
Asking

Reputation: 4192

demo: https://codesandbox.io/s/optimistic-khayyam-3g8sv?file=/src/Slider.js

 
  ? !isNaN(value) ? value : 'no value'
   : value >= 1000
 ? `$${(value / 1000).toFixed(2)}k`
 : `$${value}`
}

Let me know if it works for you

Upvotes: 1

AKX
AKX

Reputation: 169338

You have the line

inputs[i].data = parseInt(e.target.value);

– if the value is not parseable as an integer, you do get NaN.

You will have to decide what to do in that case; a simple solution is to substitute zero using the fact that NaNs are falsy:

inputs[i].data = parseInt(e.target.value) || 0;

Upvotes: 1

Related Questions