CODEWITHSUNDEEP
reactjsselectsubmit
Alexander
Alexander

Reputation: 1378

connecting a select tag to a form, and then reseting it at submit

hi guys I'm trying to reset a select tag after the submit using React,I connected the first option to the state which is :

state = {
    inputs: [],
    tempInput: {

       inputType: 'Please select a type'

    }
  };

so I basically select a type in my form, it updates the tempInput object with the inputType, and then add it to the array of objects,

 <div className="formG">
            <form className="form-maker" onSubmit={this.handleSubmit}>
               <select onChange={this.onSelect}>
                <option>{this.state.tempInput.inputType}</option>
                <option value="text">text</option>
                <option value="color">color</option>
                <option value="date">date</option>
                <option value="email">email</option>
                <option value="tel">tel</option>
                <option value="number">number</option>
              </select>

              <button>Submit</button>
            </form>

this is my on select method:

onSelect = ({ target }) => {
    const { tempInput } = this.state;
    tempInput.inputType = target.value;
    this.setState({ tempInput });

  };


handleSubmit = e => {
    e.preventDefault();
how to do that in handleSubmit? to put the tempInput.inputType to ="Please pick a type"
  };

Upvotes: 1

Views: 37

Answers (2)

Jiachen Guo
Jiachen Guo

Reputation: 281

in your onSelect function, you're mutate the state object(tempInput.inputType = target.value;), it is not a good practice in react.

if you want your select value controlled by the react state, first you need to bind it's value with react state, which it's called a controlled component, like: 

<select onChange={this.onSelect} value={this.state.tempInput.inputType}>

Upvotes: 1

Sagiv b.g
Sagiv b.g

Reputation: 31014

This is an uncontrolled element. If you want to control the value of an input / select you need to set it via your state: 

const values = [
  "text", "color", "date", "email", "tel","number"
]

class App extends React.Component {
  state = { value: "" };

  onSelect = ({target}) => this.setState({value: target.value})

  handleSubmit = () => {
    console.log('submit with ',this.state.value)
    this.setState({value: ''})
  }

  render() {
    const { value } = this.state;
    return (
      <div>
        <select onChange={this.onSelect}>
          <option>Select A value</option>
          {values.map(val => <option key={val} value={val} selected={val === value}>{val}</option>)}
        </select>
        <button onClick={this.handleSubmit}>Submit</button>
        <div>{`Selectet Value is ${value}`}</div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />

Here is the example without the array: 

class App extends React.Component {
  state = { value: "" };

  onSelect = ({ target }) => this.setState({ value: target.value })

  handleSubmit = () => {
    console.log('submit with ', this.state.value)
    this.setState({ value: '' })
  }

  render() {
    const { value } = this.state;
    return (
      <div>
        <select onChange={this.onSelect}>
          <option selected={value === ""} value="">Select A value</option>
          <option selected={value === "text"} value="text">text</option>
          <option selected={value === "color"} value="color">color</option>
          <option selected={value === "date"} value="date">date</option>
          <option selected={value === "email"} value="email">email</option>
          <option selected={value === "tel"} value="tel">tel</option>
          <option selected={value === "number"} value="number">number</option>
        </select>
        <button onClick={this.handleSubmit}>Submit</button>
        <div>{`Selectet Value is ${value}`}</div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"/>

Of course there is a lot of repeated code here, in programming there is the "DRY" principle (Do Not Repeat Yourself).
This is why we use loops like Array.prototype.map

Upvotes: 1

Related Questions