I'm getting error using laravel and react "Invalid DOM property `for`. Did you mean `htmlFor`"

Question

I'm creating a simple crud in laravel and react js while im having a trouble with this error

app.js:21988 Warning: Invalid DOM property `for`. Did you mean `htmlFor`?
    in label (created by Add)
    in div (created by Add)
    in form (created by Add)
    in div (created by Add)
    in Add (created by Context.Consumer)
    in Route (created by Index)
    in div (created by Index)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by Index)
    in Index (created by Context.Consumer)
    in Route (created by Header)
    in div (created by Header)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by Header)
    in Header (created by Index)
    in div (created by Index)
    in div (created by Index)
    in div (created by Index)
    in div (created by Index)
    in div (created by Index)
    in Index

Here's my code

import React, { Component } from 'react';
import axios from 'axios';

export default class Add extends Component {

    constructor()
    {
        super();
        this.onChangeBlogsName = this.onChangeBlogsName.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
        this.state={
            blogs_name:''

        }
    }
    onChangeBlogsName(e){
        this.setState({
            blogs_name:e.target.value
        });

    }

    onSubmit(e)
    {
        e.preventDefault();
        const blogs = {
            blogs_name : this.state.blogs_name

        }

        axios.post('http://127.0.0.1:8000/blogs/store' ,blogs)
        .then(res=>console.log(res.data));
    }

    render() {
        return (
            <div>
                <form onSubmit={this.onSubmit} >
                     <div className="form-group">
                        <label for="blogs_name">Title</label>
                        <input type="text" className="form-control" id="blogs_name" 
                        value={this.state.blogs_name} 
                        onChange={this.onChangeBlogsName} />
                    </div>
                     <button type="submit" className="btn btn-primary">Submit</button>
                </form>
            </div>
        );
    }
}

Answer 1

When using React, you can't use the for keyword in JSX, since that's a javascript keyword (remember, JSX is javascript so words like for and class can't be used because they have some other special meaning!)

To circumvent this, React elements use htmlFor instead (see React docs for more information).

So, your render function should be (I only replaced for with htmlFor):

render() {
    return (
        <div>
            <form onSubmit={this.onSubmit} >
                <div className="form-group">
                    <label htmlFor="blogs_name">Title</label>
                    <input type="text" className="form-control" id="blogs_name" 
                        value={this.state.blogs_name} 
                    onChange={this.onChangeBlogsName} />
                </div>
                <button type="submit" className="btn btn-primary">Submit</button>
            </form>
        </div>
    );
}

Answer 2

Replace for="" with htmlFor=""

In your case change this

<label for="blogs_name">Title</label>

To this

<label htmlFor="blogs_name">Title</label>

Answer 3

for is a reserved word in JavaScript this is why when it comes to HTML attributes in JSX you need to use something else, React team decided to use htmlFor respectively. You can check the list of attributes from here

Answer 4

Short answer, Remove

for="blogs_name"

In your case.