How do I listen for a number value in reactjs

Question

I have made a shopping cart in react. I have assigned a value to each button. The value shows in the dom so I know it's there.

I created a function to capture the value and then push it into an array. However, when I hit add to cart it say's "nothing added". I've been trying to find a way to listen for the value in the event listener but nothing seems to work.

I have tried putting just e.target.value but the outcome is the same.

Any ideas?

const [item, setItem] = useState([]);

function addCart(e) {
    if (e.target.value === "") {
      item.push(e.target.value);
      console.log(item);
      setCart(cart + 1);
    } else {
      console.log("nothing added");
    }
  }

 <button
              value={pro.price}
              onClick={addCart}
              className="bg-blue-500 text-white font-bold border-white p-2 rounded-md"
            >
              {"add to cart"}
            </button>

You have a state function called setItem that you're not using. — Andy
– Andy, Commented Jan 27, 2022 at 14:44
if (e.target.value === "") { - So... only add the value to the array if the value is empty? If pro.price has any value other than an empty string then this would always invoke the else block. Was that just a typo? — David
– David, Commented Jan 27, 2022 at 14:45

vighnesh153 · Accepted Answer · 2022-01-27 14:44:12Z

1

I think you need to negate the condition in the if block. e.target.value !== ""

answered Jan 27, 2022 at 14:44

vighnesh153

5,5103 gold badges26 silver badges46 bronze badges

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

Comments

ColonelCordier · Accepted Answer · 2022-01-27 14:48:22Z

0

If you want to update your state item, you've to use setItem.

function addCart(e) {
    if (e.target.value !== "") {
      setItem([...item, e.target.value]);
      console.log(item);
      setCart(cart + 1);
    } else {
      console.log("nothing added");
    }
  }

answered Jan 27, 2022 at 14:48

ColonelCordier

31 bronze badge

2 Comments

someone Over a year ago

sorry, why do i need setItem? im still learning coming from just vanilla js. I added the '!==' and that performed what i needed.

ColonelCordier Over a year ago

When you say it "works", do you mean your cart state is correctly incremented ? If so, yes it works. But your item state has been mutated using push which returns the lenght of the new array and not an array. In React, you've to use setters functions to update states.

dorianDevTech · Accepted Answer · 2022-01-27 14:58:40Z

I suggest that you could change your approach and use a class instead of a function as such :

class AddCard extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      value: 'VALUE'
    }
  }
  handleChange (e) {
    console.log('handleChange called')
  }
  handleClick () {
    this.setState({value: 'UPDATED_VALUE'})
    var event = new Event('input', { bubbles: true });
    this.myinput.dispatchEvent(event);
  }
  render () {
    return (
      <div>
        <input readOnly value={this.state.value} onChange={(e) => {this.handleChange(e)}} ref={(input)=> this.myinput = input}/>
        <button onClick={this.handleClick.bind(this)}>Change Input</button>
      </div>
    )
  }
}

ReactDOM.render(<AddCard />,  document.getElementById('app'))

By doing so you'll be able to dissociate the click event and the change event

Collectives™ on Stack Overflow

How do I listen for a number value in reactjs

3 Answers 3

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Related