0

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

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
DUMBA
  • 159
  • 2
  • 10

1 Answers1

1

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"
Apostolos
  • 10,033
  • 5
  • 24
  • 39
  • Thanks @Apostolos and if I may ask how do I refer to the properties for if I put id and name it says its undefined. Do I have to define the name and id in the state or there is a function that has to extract the id and name ???. – DUMBA Jul 24 '20 at 13:11
  • these are the properties of your object. how can id be undefined? that;'s weird – Apostolos Jul 24 '20 at 13:18
  • thank you so much its working like how you said I should put it. I guess when I referred to those objects there were typos. Thank you so much you made my day – DUMBA Jul 24 '20 at 14:36
  • 1
    again thanks and I have learnt a new trick that when answered you accept the answer.I am very grateful for what you did for me – DUMBA Jul 24 '20 at 14:47