JavaScript React Components Managing State and Data Flow Controlled Components

Dom Ss
Dom Ss
4,337 Points

What is being passed where in state/value?

So when I name differently value property, also the props from the form I still get an updated state object and no errors. For example, this does not give me any errors. Why?

`class AddPlayerForm extends Component {

state = {
    value2: ''
};

handleValueChange = (e) => {
    this.setState(
       { value2: e.target.value }
    ); 
}

render () {
    console.log(this.state.value2, 'value')
    return (
        <form> 
            <input
            type="text"
            value1={this.state.value3}
            onChange={this.handleValueChange}
            placeholder="Enter a player name"

            />
            <input 
            type="submit"
            value="Add Player"
            />

        </form>
    );
}

}`

1 Answer

onChange={this.handleValueChange} will call the function handleValueChange when the text input is changed.

which will trigger this

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

which sets the value2 key in the state to the value of the event that triggered it.

Dom Ss
Dom Ss
4,337 Points

Thank you Zimri,

so "value3" from

value1={this.state.value3}

does not have to match to "value2" from

state = {
    value2: ''
};

?

correct, I don't even think value1={this.state.value3} does anything at all