CODEWITHSUNDEEP
reactjsreact-native
tbs
tbs

Reputation: 480

Warning: Invalid DOM property `class`. Did you mean `className`? - React

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>
        )
    }
}

Upvotes: 5

Views: 14966

Answers (2)

Siva
Siva

Reputation: 21

You might have used 'class' instead of 'className' somewhere inside the js file. You can try following steps (vsCode) :

Press ctrl+f which will open a search bar, Search for 'class=' , Now keeping the search bar up there , open each and every js file out there one by one. when you find it matching , change 'class' to 'className'.

Upvotes: 2

tbs
tbs

Reputation: 480

I had used 'class' instead of 'className' in my App.js. I got it solved. Thanks

Upvotes: 2

Related Questions