CODEWITHSUNDEEP
javascriptreactjs
Robin
Robin

Reputation: 615

Storing state from options drop down in order to pass it to Parent component

I am trying to store my searchValue parameter based off the value that was chosen from options, so that I can send that value from my Child component to my Parent component. However, searchValue returns back as undefined. How can I store my searchValue based off the value that was selected in option?

I have the following:

class SearchField extends Component {
    state = {
        options: ["Choose search method", "Id Number", "Phone Number", "Mobile Number"]
    };

    handleSearchChoice = (e) => {
        var searchValue = e.target;
        console.log(searchValue);
    };

    render() {
       const initialValues = {
          name: ""
       };
       return (
          <Form handleSubmit={this.onFormSubmit} initialValues={initialValues}>
          {({ values, handleChange }) => (
             <React.Fragment>
                <FormGroup>
                <DateInput />
                <FormText>Enter customer info</FormText>
                <Input placeholder="mobile, id number, etc..."
                 name="name"
                 value={values.name}
                 onChange={handleChange}/>
                <FormText>Select an option</FormText>
                <Select onChange={this.handleSearchChoice}>
                  {this.state.options.map(option => (
                     <option key={option} value={option}>
                       {option}
                     </option>
                  ))}
               </Select>
               <div>
                  <Button onClick={this.isButtonEnabled}>Submit</Button>
               </div>
            </FormGroup>
         </React.Fragment>
       )}
     </Form>
   );
  }
}

Upvotes: 0

Views: 37

Answers (2)

arunmmanoharan
arunmmanoharan

Reputation: 2675

YOu need to set the state in the constructor.

class SearchField extends Component {

  constructor() {
    super();
    this.state = {
      options: ["Choose search method", "Id Number", "Phone Number", "Mobile Number"]
    };
  }
  
  handleSearchChoice = (e) => {
    var searchValue = event.target.value // Refer to component API to get the selected value;
    console.log(searchValue);
  };

  render() {
    return ( 
    <Form >
      <Select onChange = {this.handleSearchChoice}>
      {this.state.options.map((option, key) => ( 
        <option key = {key}>{option}</option>
        ))}
        <Select>
      </Form>
    );
  }
}

Upvotes: 0

Andy
Andy

Reputation: 63570

At the moment you're (incorrectly) trying to grab an element from the state (for some reason) when you should be grabbing the value of the selected option.

You should add a value attribute to each option

<option key={option} value={option}>{option}</option>

which you can then pick up in the handle method

handleSearchChoice = (e) => {
  var { value: searchValue } = e.target;
  console.log(searchValue);
};

Note: I relabeled the destructed value property to searchValue per your question.

You might want to rethink how you build that select element as you will receive "Choose search method" as the value of the returned default option.

Upvotes: 2

Related Questions