import React from 'react';

class InfoForm extends React.Component {
    constructor() {
        super();
        this.state={
            _id:'',
            Name:'',
            Age:'',
            isEdit:false
        }
    }

    infoChange = event =>{
        const {name,value} = event.target;
        this.setState({
            [name]:value
        })
    }
    infoSubmit = event => {
        if(!this.state.isEdit){
            let data = {
                isEdit:this.state.isEdit,
                Name:this.state.Name,
                Age:this.state.Age
            }
            this.props.myData(data);
        }
        else{
            let data = {
                isEdit:this.state.isEdit,
                _id:this.state._id,
                Name:this.state.Name,
                Age:this.state.Age
            }
            this.props.myData(data);
        }
    }

    static getDerivedStateFromProps(props, state) {
        if(props.setForm._id !== null)
        {
            return{
                isEdit:true,
                _id : props.setForm._id,
                Name:props.setForm.Name,
                Age:props.setForm.Age
            }
        }
        return null
    }
    render() {
        return (
            <form onSubmit={this.infoSubmit} autoComplete="off">
                <div className="form-group">
                    <label>Email Name:</label>
                    <input type="text" className="form-control" placeholder="Enter Name"
                           onChange={this.infoChange} name="Name" value={this.state.Name}
                    />
                </div>
                <div className="form-group">
                    <label>Email Age:</label>
                    <input type="text" className="form-control" placeholder="Enter Age"
                           onChange={this.infoChange} name="Age" value={this.state.Age}
                    />
                </div>
                <button type="submit" className="btn btn-primary">{this.state.isEdit ? 'update': 'Submit'}</button>
            </form>
        )
    }
}
export default InfoForm;

Form inputs wont allow to edit the values. when i click button this error occuring "Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component." please help me am new to react.