CODEWITHSUNDEEP
javascriptreactjssemantic-ui
Youssef
Youssef

Reputation: 645

Changing the props of onChange in React

I use this dropdown component by Semantic UI, it has an onChange method that updates the value of the selection, usually, it works like onChange={this.pickIcon} and then you can access the value

pickIcon = (e, { value}) => {
  console.log(value)
  // console.log(item)
}

My situation here is a bit different I got a list with array map, each with a single dropdown, I need the value of each array item so I can save the data, getting only the selected icon does not help, can please someone assist with that?

I tried adding the prop manually but it crash and I cannot log both values as it throw this error 

onChange={(item) => this.pickIcon(item)}

Cannot destructure property 'value' of 'undefined' as it is undefined.

This is my full code to give you a better context

const menuIcons = this.state.screens.map((item, index) => (
  <Grid.Row key={index}>
    <Grid.Column width="6">{item.name}</Grid.Column>
    <Grid.Column width="10">
      <h4>{selectedIcon}</h4>
      <Dropdown
        fluid
        onChange={item => this.pickIcon(item)}
        options={iconsList}
        placeholder="Pick Icon"
        selection
        search
        value={selectedIcon}
      />
    </Grid.Column>
  </Grid.Row>
));

My goal is to pass either item or index to the function

Upvotes: 0

Views: 821

Answers (5)

AakashRajni
AakashRajni

Reputation: 382

I think the error is in this code

 pickIcon = (itemdata) => {
    console.log(itemdata)
    // console.log(item)
  }

when you call function without param it will automatically pass event (e) and the value so you got it right the first time

Now you are passing one param so you should receive with one param only

Upvotes: 0

Youssef
Youssef

Reputation: 645

All answers only focus on a single param I need both of them, anyway I figured this out 

  onChange={(e, value) => this.pickIcon(item, e, value)}

  pickIcon = (item, e, value) => {
        console.log(item)
        console.log(value)
      }

Upvotes: 0

Arpitha Chandrashekara
Arpitha Chandrashekara

Reputation: 1137

Your pickIcon function takes two parameters, (e, {value}). So you should be passing 2 arguments to it or you should change your pickIcon function to accept single argument.

Your onChange will give you event object. so call your pickIcon like below provided you are interested in event object -

onChange={(event) => this.pickIcon(event, item)}

If you are not interested in event object use below -

onChange={() => this.pickIcon(item)}

pickIcon = (item) => {
  console.log(item)
}

Upvotes: 1

Zunaib Imtiaz
Zunaib Imtiaz

Reputation: 3119

The first param is always recognized as an Event e

So here item is recognized as an item and hence you cant seem to make it work as the function accepts two params.

Try this

pickIcon = (e, value) => {
    console.log(e)
    console.log(value)
  }

onChange={(e) => this.pickIcon(e,item)}

Upvotes: 1

Jay
Jay

Reputation: 3107

Please remove item from function

  <Dropdown
    fluid
    onChange={() => this.pickIcon(item)} // Here remove item and pass from map
    options={iconsList}
    placeholder='Pick Icon'
    selection
    search
    value={selectedIcon}
  />

Also you are passing only item please remove event

  pickIcon = ({ value }) => { // Remove e
    console.log(value)
    // console.log(item)
  }

Upvotes: 0

Related Questions