I'm new to ReactJS. From what I understand the below error occurs on the browser only when I use 'class' instead of 'className'. But I have already searched and there is no such word as 'class' in my code. What would be the reason behind this error.Am I missing something here?
render() {
return (
<div style={{marginTop: 10}}>
<h3>Create New Todo</h3>
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label>Description: </label>
<input type="text"
className="form-control"
value={this.state.todo_description}
onChange={this.onChangeTodoDescription}
/>
</div>
<div className="form-group">
<label>Responsible: </label>
<input
type="text"
className="form-control"
value={this.state.todo_responsible}
onChange={this.onChangeTodoResponsible}
/>
</div>
<div className="form-group">
<div className="form-check form-check-inline">
<input className="form-check-input"
type="radio"
name="priorityOptions"
id="priorityLow"
value="Low"
checked={this.state.todo_priority === 'Low'}
onChange={this.onChangeTodoPriority}
/>
<label className="form-check-label">Low</label>
</div>
<div className="form-check form-check-inline">
<input className="form-check-input"
type="radio"
name="priorityOptions"
id="priorityMedium"
value="Medium"
checked={this.state.todo_priority === 'Medium'}
onChange={this.onChangeTodoPriority}
/>
<label className="form-check-label">Medium</label>
</div>
<div className="form-check form-check-inline">
<input className="form-check-input"
type="radio"
name="priorityOptions"
id="priorityHigh"
value="High"
checked={this.state.todo_priority === 'High'}
onChange={this.onChangeTodoPriority}
/>
<label className="form-check-label">High</label>
</div>
</div>
<div className="form-group">
<input type="submit" value="Create Todo" className="btn btn-primary"/>
</div>
</form>
</div>
)
}
These are the other components on the project. I can't find any 'class' on any of them
import React,{Component} from "react";
export default class EditTodo extends Component{
render() {
return(
<div>
<p>Welcome to Edit Todo Component!!</p>
</div>
)
}
}
import React,{Component} from "react";
export default class TodosList extends Component{
render() {
return(
<div>
<p>Welcome to Todos List Component!!</p>
</div>
)
}
}