ReactJS: How to change Text value on button click

Question

I am creating a form in my App and need to add a quantity field in it. I have added a <Text> component from informed to add quantity field and used buttons to add increment and decrement feature.

But I am not able to set Text component value on button click. It seems like I can only set initialValue for <Text> component.

import React, { Component } from 'react';
import { arrayOf, number, shape, string } from 'prop-types';

import classify from 'src/classify';
import defaultClasses from './quantity.css';
import { Text } from 'informed';

class Quantity extends Component {
    static propTypes = {
        classes: shape({
            root: string,
            increment_button: string,
            decrement_button: string,
            quantity_input: string
        }),
        items: arrayOf(
            shape({
                value: number
            })
        )
    };

    state = {
        quantity: 1,
        show: true,
        max: 9999,
        min: 1
    };

    incrementQty = () => {
        this.setState(prevState => {
            if(prevState.quantity < this.state.max) {
                return {
                    quantity: parseInt(prevState.quantity) + 1
                }
            } else {
                return null;
            }
        });
        /*this.setState({ quantity: parseInt(this.state.quantity) + 1 });*/
    };
    decrementQty = () => {
        this.setState(prevState => {
            if(prevState.quantity > this.state.min) {
                return {
                    quantity: parseInt(prevState.quantity) - 1
                }
            } else {
                return null;
            }
        });
        /*this.setState({ quantity: parseInt(this.state.quantity) - 1 });*/
    };
    setQuantity = quantity => this.setState({ quantity });
    handleChange = (event) => {
        this.setState({quantity: event.target.value});
    };

    render() {
        const { classes, ...restProps } = this.props;
        console.log(this.state.quantity);
        return (
            <div className={classes.root}>
            <span onClick={this.decrementQty} className={classes.decrement_button}>-</span>
            <Text
                initialValue = {`${this.state.min}`}
                className={classes.quantity_input}
                field="quantity"
                onChange={this.handleChange}
                value={this.state.quantity}
                label=""
            />
            <span onClick={this.incrementQty} className={classes.increment_button}>+</span>
            </div>
    );
    }
}

export default classify(defaultClasses)(Quantity);

I have tried using value prop but its not working. If I am using uncontrolled html <input> field, the buttons and quantity increment decrement works but I don't want to use <input> element with my form.

As stated in question, I am using informed. npmjs.com/package/informed — Jaimin Sutariya
– Jaimin Sutariya, Commented May 29, 2019 at 10:28
using hook method look here joepuzzo.github.io/informed/?path=/story/hooks--useformapi — adel
– adel, Commented May 29, 2019 at 10:44

Radonirina Maminiaina · Accepted Answer · 2019-05-29 10:43:36Z

1

You're right, informed Text doesn't have a prop value, I found a trick on how to set the value of the Text on a click of a button.

You can create a ref using React.createRef to your Text then set the value via this ref.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.ref = React.createRef();
  }
  state = {
    min: 10
  };
  changeQt = () => {
    this.ref.current.value = 20;
  };
  render() {
    return (
      <div className="App">
        <Text
          initialValue={`${this.state.min}`}
          field="quantity"
          onChange={this.handleChange}
          label=""
          ref={this.ref}
        />
        <button onClick={this.changeQt}>Click</button>
      </div>
    );
  }
}

Demo here.

edited May 29, 2019 at 10:43

answered May 29, 2019 at 10:29

Radonirina Maminiaina

7,0144 gold badges35 silver badges63 bronze badges

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

4 Comments

Jaimin Sutariya Over a year ago

Thank you for this demo. I am trying to implement but facing below warning

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

and an error where I am assigning value Uncaught TypeError: Cannot set property 'value' of null, Would you guide me on this.?

Radonirina Maminiaina Over a year ago

Can you create a sandbox for that error, so I can help you!?

Jaimin Sutariya Over a year ago

I have created a demo codesandbox.io/s/mystifying-moon-3718g but here its working. Thank you for the solution, I'll check my code now and will debug the issue.

Radonirina Maminiaina Over a year ago

Glad to hear that it helps you. You're welcome mate

Tony · Accepted Answer · 2019-05-29 10:28:37Z

1

Maybe your code should be

 onChange={quantity => this.handleChange(quantity)}

and your code to handle state update

onChange = (e) => {
  this.setState({
    [e.target.name]: e.target.value
  });
}

answered May 29, 2019 at 10:28

Tony

20.3k7 gold badges42 silver badges62 bronze badges

3 Comments

Jaimin Sutariya Over a year ago

Thank you tony for the answer but it does not update textbox value when I click on button.

Jap Mul Over a year ago

onChange={quantity => this.handleChange(quantity)} does the same as onChange={this.handleChange} except that in the first case the function is recreated on every render..

Jaimin Sutariya Over a year ago

I have updated question with my complete file code. As you can see I have used console.log to get quantity value and I can get correct values when I click on inc/dec buttons.

Collectives™ on Stack Overflow

ReactJS: How to change Text value on button click

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related