How to update state from selectedValue? or How to pass selected value as argument to the helper method

class SelectParker extends Component {
  state = {
    selectedValue: "",
    values: [],
  };

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(function (res) {
        return res.json();
      })
      .then((json) => {
        this.setState({
          values: json,
        });
      });
  }

  handleOnChange = (event) => {
    console.log(event);
  };
  render() {
    return (
      <div className="card">
        <div className="card-header">Select Parker</div>
        <div className="card-body">
          <div>
            <select className="form-select" aria-label="Default select example">
              {this.state.values.map((obj) => {
                return (
                  <option key={obj.id} value={obj.id}>
                    {obj.name}
                  </option>
                );
              })}
            </select>
          </div>
        </div>
      </div>
    );
  }
}

export default SelectParker;

How to pass selected value as argument to the helper method to update the state

CodePudding user response：

You should use your handleOnChange method in the select element and then pass the selectedValue as the value of the select.

So this would work:

import React from 'react';

class SelectParker extends React.Component {
  state = {
    selectedValue: "",
    values: [],
  };

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(function (res) {
        return res.json();
      })
      .then((json) => {
        this.setState({
          values: json,
        });
      });
  }

  handleOnChange = (event) => {
    console.log(event.target.value)
    this.setState({
      selectedValue: event.target.value
    })
  };
  render() {
    return (
      <div className="card">
        <div className="card-header">Select Parker</div>
        <div className="card-body">
          <div>
            <select value={this.state.selectedValue} className="form-select" aria-label="Default select example" onChange={this.handleOnChange}>
              {this.state.values.map((obj: any) => {
                return (
                  <option key={obj.id} value={obj.id}>
                    {obj.name}
                  </option>
                );
              })}
            </select>
          </div>
        </div>
      </div>
    );
  }
}

export default SelectParker;

CodePudding user response：

    handleOnChange = (event) => {
    this.setState({selectedValue:event.target.value});
  };

<select className="form-select" aria-label="Default select example"
    onChange={handleOnChange}
    >
                  {this.state.values.map((obj) => {
                    return (
                      <option key={obj.id} value={obj.id}>
                        {obj.name}
                      </option>
                    );
                  })}
                </select>