CODEWITHSUNDEEP
reactjsprimereact
DUMBA
DUMBA

Reputation: 179

Having a problem with PrimeReact Dropdown

I am still a novice in React Js and recently I have been developing using PrimeReact. The Forms and DataTables are doing well for me but I cant seem to figure out how deal with the Dropdown. My state is managed by redux and after mapStateToProps I and loading my data using componentDidMount I can console.log and see my data array. With a normal react select input I have been using the following code:

const {accounttypes} = this.props;

    console.log(accounttypes)
    let typesOptions = accounttypes.length > 0
        && accounttypes.map((item, index) => {
            return (
                <option key={item.id } value={item.id}>{item.name}</option>
            )
        }, this);

This works as an option as I can post to my backend. However I would want to use PrimeReact for all my forms and I have been struggling on how to go about it. The following has been my attempt and its giving me a headache:

<div className="p-field p-col-12 p-md-4">
                <Dropdown
                  value={account_type}
                  optionValue = {accounttypes.id}
            
                  optionLabel = {accounttypes.name} 
                  options={accounttypes}

                  onChange={this.onTypeChange}
                  placeholder="Select an Acco"
                  autoFocus = {true}
                  editable={true}
                />
</div>

account_type is the name of my field and my django model references the accountytpe model and would like to capture account_type whilst creating an Account. May someone help. And thanks in advance

Upvotes: 0

Views: 5702

Answers (1)

Apostolos
Apostolos

Reputation: 10463

optionLabel and optionValue should point to equivalent properties of your object. In your case I guess the correct way is this

                  optionValue="id"
                  optionLabel="name"

Upvotes: 2

Related Questions