When I add more than two inputs i get an warning about controlled component changing to uncontrolled component. Also when you add value on the second input the first input also gets inputted.

Warning :A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

import MyForm from './Components/MyForm';
import uniqid from "uniqid";

class App extends Component {
  constructor (props) {
    super(props);
    
    this.state = {
      person: {
        firstName : '',
        secondName : '',
        profession : '',
        city: '',
        state: '',
        phone:'',
        email: '',
        jobTitle: '',
        employer: '',
        startDate: '',
        endDate: '',
        schoolName: '',
        schoolLocation: '',
        gradStartDate: '',
        gradEndDate: '',
        id: uniqid()
        },
      resume:[]
      }

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange = (event) => {
    this.setState({
      person : {
        firstName: event.target.value,
        seconfName: event.target.value,
      }
    });
  }

  handleSubmit = (event) => {
    event.preventDefault();
    return alert(this.state.person.firstName   this.state.person.secondName)
  }

  render () {
    const { person, resume} = this.state;
    return (
      <div>
      <MyForm person = {person} resume = {resume} handleChange={this.handleChange} handleSubmit={this.handleSubmit}/>
      </div>
      
    )
  }
}


class MyForm extends React.Component {
    
    
    render() {
        const {person, handleChange,handleSubmit } = this.props;
        console.log(person,handleChange)
        return (
            <div>
                <form onSubmit = { handleSubmit }>
                    <div>
                        <label>
                            First Name:
                        <input type="text" value = { person.firstName }
                        onChange = { handleChange } name="firstName" />
                        </label>
                    </div>
                    <div>
                        <label>
                                Second Name:
                            <input type="text" value = { person.secondName }
                            onChange = { handleChange } name="secondName" />
                            </label>
                    </div>
                    
                    <input type ="submit" value = "Submit" />
                </form>
            </div>
        )
    }
}



export default MyForm;

CodePudding user response：

The problem is that you are affecting the same value to both firstName and secondName, you should handle the change of the first name separatly from the second name, and also you have a mistake of naming in handleChange, you are writing seconfName instead of secondName.

You can try this:

import MyForm from './Components/MyForm';
import uniqid from "uniqid";

class App extends Component {
constructor (props) {
    super(props);
    
    this.state = {
    person: {
        firstName : '',
        secondName : '',
        profession : '',
        city: '',
        state: '',
        phone:'',
        email: '',
        jobTitle: '',
        employer: '',
        startDate: '',
        endDate: '',
        schoolName: '',
        schoolLocation: '',
        gradStartDate: '',
        gradEndDate: '',
        id: uniqid()
        },
    resume:[]
    }

    this.handleChangeFirstName = this.handleChangeFirstName.bind(this);
    this.handleChangeSecondName = this.handleChangeSecondName.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

handleChangeFirstName = (event) => {
    this.setState({
    person : {
        ...this.state.person,
        firstName: event.target.value,
    }
    });
}

handleChangeSecondName = (event) => {
    this.setState({
    person : {
        ...this.state.person,
        secondName: event.target.value,
    }
    });
}

handleSubmit = (event) => {
    event.preventDefault();
    return alert(this.state.person.firstName   this.state.person.secondName)
}

render () {
    const { person, resume} = this.state;
    return (
    <div>
    <MyForm person = {person} resume = {resume} handleChangeFirstName={this.handleChangeFirstName} handleChangeSecondName={this.handleChangeSecondName} handleSubmit={this.handleSubmit}/>
    </div>
    
    )
}
}


class MyForm extends React.Component {
    
    
    render() {
        const {person, handleChangeFirstName, handleChangeSecondName,handleSubmit } = this.props;
        console.log(person,handleChange)
        return (
            <div>
                <form onSubmit = { handleSubmit }>
                    <div>
                        <label>
                            First Name:
                        <input type="text" value = { person.firstName }
                        onChange = { handleChangeFirstName } name="firstName" />
                        </label>
                    </div>
                    <div>
                        <label>
                                Second Name:
                            <input type="text" value = { person.secondName }
                            onChange = { handleChangeSecondName } name="secondName" />
                            </label>
                    </div>
                    
                    <input type ="submit" value = "Submit" />
                </form>
            </div>
        )
    }
}



export default MyForm;