multiple dropdown values not able set component state

Question

I have tried multiple dropdown in ractjs applicaton i need to set state this values but not setting values.Then trying to get values on form submit but statemembers got undefined.Can some one help me out this problem

import { Dropdown } from 'semantic-ui-react'

class GroupCreation extends Component {
    constructor() {
        super();
        this.state = {
            name: '',
            members: [],
        }
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit = (event) => {
        console.log('handle submit event:', event);
        event.preventDefault();
        console.log('state values:', this.state);
    }
    render() {
        const { t } = this.props;

        if (this.props.DriverInfolistReducer.driverInfolist.length > 0) {
            this.driverUId = this.props.DriverInfolistReducer.driverInfolist.map((drivers, index) => {
                console.log('driver in group list:', drivers);
                return {
                    key: index,
                    text: drivers.userid,
                    value: drivers.userid
                };
            });
        }
        return (

            <AUX>
                <form onSubmit={this.handleSubmit} className="form-horizontal m-t-30">
                    <div className="form-group row">
                        <label htmlFor="members-input" className="col-sm-2 col-form-label">Members</label>
                        <div className="col-sm-10">
                            <Dropdown fluid multiple selection options={this.driverUId} onChange={(e, data) => this.setState({ members: data.values })} />
                        </div>
                    </div>
                    <div className="form-group row justify-content-end" >
                        <div className="button-items d-flex  p-l-10">
                            <Button size="sm" outline color="primary" onClick={this.clearInput} type="button">{t('Cancel')}</Button>
                        </div>
                        <div className="button-items d-flex p-l-10">
                            <Button size="sm" outline color="primary" type="submit" >{t('Save')}</Button>
                        </div>
                    </div>
                </form>
            </AUX>
        );
    }

}

you need to add the code for your whole component I think

Will Jenkins
– Will Jenkins

2019-09-11 15:06:03 +00:00
Commented Sep 11, 2019 at 15:06 — Will Jenkins
– Will Jenkins, Commented Sep 11, 2019 at 15:06

June Wenston · Accepted Answer · 2019-09-11 15:20:46Z

1

The second argument of callback function onChange holds data.

try this:

<Dropdown fluid multiple selection options={this.driverUId} value={this.state.members} onChange={(e,data) => this.setState({ members: data.value })} />

live example

answered Sep 11, 2019 at 15:20

June Wenston

12411 bronze badges

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

5 Comments

June Wenston Over a year ago

It should be. Have u ever console the data?

SaranViji Over a year ago

yes data has value: Array(3) 0: "DRI36" 1: "DRI41" 2: "DRI45" length: 3 proto: Array(0)

SaranViji Over a year ago

but not updating to state

June Wenston Over a year ago

I expected it to be a simple value, however it's an array. Is that intended?

June Wenston Over a year ago

@SaranViji Not a problem. If it solved your question, could you mark it solved? Thx.

Collectives™ on Stack Overflow

multiple dropdown values not able set component state

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related