My text filed is not changing

JavaScript
1 
import React, {Component} from "react"

class App extends Component {
    constructor() {
        super()
        this.state = {
            firstName: "",
            lastName: "",
            age: "",
            gender: "",
            destination: "",
            dietary: false,
            dietaryrestriction: ""
        }
        let style = false
        this.handleChange = this.handleChange.bind(this)
    }
    handleChange(e){
        const {name,type,value,checked} = e.target
        this.style = this.state.dietary ? {display : 'block'} : {display: 'none'}
        this.setState(type === "checkbox" ? {[name]: checked} : {[name]: value})
    }
    render() {
        return (
            <main>
                <form>
                    <input type="text" name="firstName" value={this.state.firstName} placeholder="First Name" onClick={this.handleChange} />
                    <br />
                    <input type="text" name="lastName" value={this.state.lastName} placeholder="Last Name" onClick={this.handleChange} />
                    <br />
                    <input type="number" name="age" value={this.state.age} placeholder="Age" onClick={this.handleChange} />
                    <br />
                    
                    {/* Create radio buttons for gender here */}
                    <br />
                    <label>
                    <input type="radio" name="gender" value="male" checked={this.state.gender === "male"} onChange={this.handleChange} />
                    Male
                    </label>
                    
                    <br />
                    <label>
                    <input type="radio" name="gender" value="female" checked={this.state.gender === "female"} onChange={this.handleChange} />
                    Female
                    </label>
                    <br />
                    
                    {/* Create select box for location here */}
                    
                    <br />
                    
                    <select value={this.state.destination}>
                        <option value="India" onChange={this.handleChange}>India</option>
                        <option value="Japan" onChange={this.handleChange}>Japan</option>
                        <option value="Bhutan" onChange={this.handleChange}>Bhutan</option>
                    </select>
                    
                    {/* Create check boxes for dietary restrictions here */}
                    <br />
                    <br />
                    <label>
                    <input type="radio" value={this.state.dietary} onChange={this.handleChange} checked={this.state.dietary} />
                    Is there any dietary restrection?
                    </label>
                    <textarea style={this.style} value={this.state.dietaryrestriction} onChange={this.handleChange} />
                    <br />
                    <br />
                    <button>Submit</button>
                </form>
                <hr />
                <h2>Entered information:</h2>
                <p>Your name: {this.firstName}{this.lastName}</p>
                <p>Your age: {this.age}</p>
                <p>Your gender: {this.gender}</p>
                <p>Your destination: {this.destination}</p>
                <p style={this.style}>
                    Your dietary restrictions: 
                    {/* Dietary restrictions here, comma separated */}
                </p>
            </main>
        )
    }
}

export default App

the text field,number and other n=inputs are not responding.
I have binded the handleChange(), then too it is not working.
Appreciate any help.

2

You need to create make sure your onChange event handler also considers the text fields, so that everytime there is a change into it, you modify the state, if not by binding them, you will not be able to use them:

Add onChange={this.handleChange}

<input type="text" name="firstName" value={this.state.firstName} placeholder="First Name" onClick={this.handleChange} onChange={this.handleChange} />

Also the other things you are going to have to do is modify your change handler to not only consider checkbox inputs, but also text fields, would normally recommend something like this:

  onChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

Hope that helps!

1 Like