CODEWITHSUNDEEP
reactjsreact-select
Mariana Mugeiro
Mariana Mugeiro

Reputation: 33

Why can't I use the value of my selected option?

I'm building a form consisting in two selects: one for a list Gitlab projects and one for a list of Clockify projects. In each select, my options are an array of projects, with label being the projects name and the value being the project id.

class NewDashboard extends Component {

  constructor(props) {
    super(props)
    this.state = {
      gitlabId: '',
      clockifyId: ''
    }
  }

  handleChange = event => {
    change({ 'gitlabId': event.target.value, 'clockifyId': event.target.value })

  };

render() {

const { gitlabId, clockifyId } = this.props.form
const { projects, projTime } = this.props

if (projects) {
      gitlabProjs = projects.map(project => ({
        value: project.id,
        label: project.namespace.name + ": " + project.name,
      }));
      console.log(gitlabProjs)
    }

if (projTime) {
      clockifyProjs = projTime.timeEntries.map((timeEntry) => ({
        value: timeEntry.project.id,
        label: timeEntry.project.name,
      }));
      // console.log(clockifyProjs)
    }
...

The problem is: I can't seem to access my selected option value (project id), as it returns undefined. 

<Select
      value={gitlabId.value}
      type="search"
      options={gitlabProjs}
      onChange={e => {
        change({ 'gitlabId': gitlabProjs.value })
                 console.log(gitlabProjs.value)
      }}
      placeholder="Projeto no Gitlab..."
></Select>

I'm probably doing this the wrong way. Does anyone know what the problem might be? (I'm a react beginner).

Upvotes: 2

Views: 1472

Answers (2)

user6612182
user6612182

Reputation:

The onChange prop expects a function which accepts the selected value as the first argument (typings: One of <Object, Array<Object>, null, undefined>). So using event.target.value has no effect.

Also the value prop itself accepts an object that it will display as selected value. So you can either save the whole option object and give that to the value prop:

handleChange = (option) => {
    change({'gitlabId': option, 'clockifyId': option});
}

<Select
    { ... }
    value={gitlabId}
    onChange={this.handleChange}
/>

or you can save the value of the option and then filter through your options array to find the selected value:

handleChange = (option) => {
    change({'gitlabId': option.value, 'clockifyId': option.value});
}

<Select
    { ... }
    value={gitlabProjs.find((val) => val.value === gitlabId)}
    onChange={this.handleChange}
/>

Also on a sidenote: The prop type has no effect as it is not required by the Select component.

Edit: Reference: react-select prop documentation

Upvotes: 1

user10456009
user10456009

Reputation:

can you change the current onChange function in the Select to:

onChange={this.handleChange}

and add a console.log(event) to your handleChange function

Upvotes: 0

Related Questions