When I select a value from the dropdown menu, the selected value is being added to the other fields as well. Here is the code snippet that was causing the issue:
import React, { Component } from 'react';
import './C.css';
import {ButtonToolbar,Button} from 'react-bootstrap';
import axios from 'axios';
export default class Coldata extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'select dept'};
this.handleChange = this.handleChange.bind(this);
this.state={
Regdno:'',
Yos:'',
dept:'',
complaint:''
};
}
onChange = (e) => {
console.log(e.target.Regdno)
const state = this.state
state[e.target.Regdno] = e.target.value;
this.setState(state);
}
onSubmit = (e) => {
e.preventDefault();
const data = this.state;
axios.post('http://localhost:80/create/complaint', data)
.then((result) => {
alert("Complaint created")
})
}
handleChange(event) {
this.setState({value: event.target.value});
}
render() {
const{Regdno,Yos,dept,complaint}=this.state;
return (
<form onSubmit={this.onSubmit} className="col" >
<div align="right"><Button bsSize="large" href="/login" value="Logout"> Logout </Button></div>
<font size="5" >
<div className="log">
<h1> College </h1>
<p> Regd_no </p>
<input type="text" name="Regdno" id="regdno" size="10" placeholder="Enter Regd_no" value={this.state.value} onChange={this.onChange} required />
<p> Year of study </p>
<input type="text" name="Yos " size="5" placeholder="Enter year of study" value={this.state.value} onChange={this.onChange} />
<label> Select Dept </label>
<select value={this.state.value} onChange={this.handleChange} className="op" name="dept" id="dept" required>
<option value="Cse">Cse</option>
<option value="Ece">Ece</option>
<option value="It">IT</option>
<option value="EEE">EEE</option>
<option value="Mech">Mech</option>
<option value="Chem">Chem</option>
</select>
<br />
<label> Disciplinary Issue </label>
<input type="text" size="20" name="complaint" value={this.state.value} onChange={this.onChange} required/>
<ButtonToolbar>
<Button bsStyle="primary" bsSize="lg" type="submit" value="submit" block> ADD </Button>
</ButtonToolbar>
</div>
</font>
</form>
);
}
}.col{
margin: 0;
padding: 0;
background: url(./Nature.jpeg);
background-size: contain;
background-position: center;
font-family: sans-serief;
height: 768px
}
.log{
width: 320px;
height:570px;
background: rgba(0,0,0,0.5);
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%);
box-sizing: border-box;
padding: 70px 30px;
}
h1{
margin:0;
padding: 0 0 10px;
position: relative;
text-align:center;
font-size:22px;
}
.log p{
margin: 0;
padding: 0;
font-weight:bold;
}
.log input{
width:100%;
margin-bottom:10px;
}
.log input[type="text"],input[type="password"] :focus
{
border:none;
border-bottom: 1px solid #fff;
background:transparent;
outline:none;
height:60 px;
color: #fff;
font-size: 22px;
box-sizing: border-box;
}
.log input[type="submit"]
{
border:none;
outline:none;
background: #1c8adb;
color: #fff;
font-size: 20px;
margin-top: 10px;
}
.op {
margin-top: 10px;
width:auto;
color: red;
height: 40px;
}https://i.sstatic.net/5q6Oh.png
A warning message stating, "A component is changing an uncontrolled input of type text to be controlled." It's advised to decide between using a controlled or uncontrolled input element for the component's lifetime.