• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

216
Views
In reactjs dropdown, how to pass specific value and not whole array?

I'm getting correct values in dropdown but after that when I'm calling onchange, whole array is getting passed as argument. so e has the whole array and not just the value selected this is the code:

const { accountIDs } = this.state;
let accountIDlist =
    accountIDs.length > 0 &&
    accountIDs.map((item, i) => {
        return (
            <option key={i} value={item}>
                {item}
            </option>
        );
    }, this);

<Select
    style={{ width: "100%" }}
    defaultValue="188619942792"
    autosize={true}
    onChange={e => {
        debugger;
        console.log(e);
        this.reset();
        this.setAccountID(e);
    }}
>
    <select value={accountIDlist}>{accountIDlist}</select>
</Select>
almost 3 years ago · Juan Pablo Isaza
3 answers
Answer question

0

You main component should be managing the state, so load in the ids, and initially set selected to nothing. Then pass in the ids and selected state to your Select component. That will iterate over the ids to create the options, and if the id of an option matches that of the selection set the selected property.

const { Component } = React;

class Select extends Component {
  render() {
    const { ids, selected, handleChange } = this.props;
    return (
      <select onChange={handleChange}>
        <option selected>Choose</option>
        {ids.map(id => {
          return (
            <option
              value={id}
              selected={selected === id}
            >{id}
            </option>
          );
        })}
      </select>
    );
  }
}

class Example extends Component {

  constructor(props) {
    super();
    this.state = { ids: props.ids, selected: '' };
  }

  handleChange = (e) => {
    this.setState({ selected: +e.target.value });
  }

  render() {
    const { ids, selected } = this.state;
    return (
      <Select
        ids={ids}
        selected={selected}
        handleChange={this.handleChange}
      />
    );
  }

};

const ids = [1, 2, 3, 4, 5];

ReactDOM.render(
  <Example ids={ids} />,
  document.getElementById('react')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

almost 3 years ago · Juan Pablo Isaza Report

0

<select
  name="account_id"
  onChange={handleChange}
>
  {props.accountIDList.map((accountId) => <option value={accountId}>{accountId}</option>)}
</select>

You can set the default when you set up state like so... const [accountId, setAccountId] = React.useState(account_id: 188619942792);

almost 3 years ago · Juan Pablo Isaza Report

0

the answer to this would be:

    <Select
        style={{ width: "100%" }}
        defaultValue="188619942792"
        autosize={true} 
        value = {accountIDlist}   
        onChange={e => {         
          this.reset()
          this.setAccountID(e)
        }}
         >
         
        {accountIDlist}

      </Select >

no need of child select component here.

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error