In my form field I can not write anything.there just showing form and input field nothing can be typed name field as usual other fields.I just declare state as given in my code. I can not understand what should I do i can not find the error.Where is the error.I am new in react .Can you help me about this.

import axios from 'axios';
import React, { Component } from 'react'
import { Form } from 'react-bootstrap';
import { Link } from 'react-router-dom';

class AddStudent extends Component {
    state = {
        name:'',
        course:'',
        email:'',
        phone:'',
    }
     
    handleInput = (e) => {
        this.setState=
        ({
           [e.target.name]:e.target.value
        });
    }

    saveStudent = async (e) =>{ 
        e.preventDefault();
        const res = await axios.post('http://localhost:8000/api/add-student',this.state);
        if(res.data.states === 200)
        {
            console.log(res.data.message);
            this.setState ({
                name:'',
                course:'',
                email:'',
                phone:'',

            });
        }
    }


    render()
    {
        return (
    <div className="container">
        <div className="row">
            <div className="col-md-6">
            <div className="card">
            <div className="card-holder">
<h4>
   Add Student
    <Link to={'/'} className="btn btn-primary btn-sm float-end"> Back </Link>
</h4>
            </div>
<div className='card-body'>

<form onSubmit={this.saveStudent} >

<div className="form-group mb-3">
<label>Student Name</label>
<input type="text" name="name" onChange={this.handleInput}  value={this.state.name} className="form-control" />
</div>
<div className="form-group mb-3">
<label>Student Course</label>
<input type="text" name="course" onChange={this.handleInput}  value={this.state.course} className="form-control" />
</div>
<div className="form-group mb-3">
<label>Student Email</label>
<input type="text" name="email" onChange={this.handleInput}   value={this.state.email} className="form-control" />
</div>
<div className="form-group mb-3">
<label>Student Phone</label>
<input type="text" name="phone" onChange={this.handleInput}  value={this.state.phone}  className="form-control" />
</div>

<div className="form-group mb-3">
<button type="submit" className="btn btn-primary">Save Student</button>
</div>

  </form>

</div>

</div>

            </div>
            </div>

        </div>
      
    
  );
    }
  
}

export default AddStudent

CodePudding user response：

You have to use setState as separate function , not as a variable. Just change your handleInput function as below.

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

CodePudding user response：

You have a typo in your handleInput function. Just remove the = sign from your handleInput function.

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