CODEWITHSUNDEEP
javascriptreactjs
Vojtech Litavsky
Vojtech Litavsky

Reputation: 33

Why is submit state not updating after change of input right away?

please help me wit this code. I am struggling to update state right away after input is inserted. I was trying to do it with onSubmit method at least to sync input === submit after clicking on Button but still no luck as per console log.

See console picture: enter image description here

How should I do it?

import React from 'react';
import './Search.css'; 

const results = ["Balaton", "Zamardi", "Sound", "Madarsko", "Sziget", "Hungary"]

class Search extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            input: '',
            submit: ''
        };
        this.onInput = this.onInput.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }

    onInput(event) {
        this.setState({
            input: event.target.value,
            submit: this.state.input});
        console.log(this.state.input)
        console.log(this.state.submit)
    }

    onSubmit(event) {
        event.preventDefault()
        if (results.includes(this.state.input)){
            return alert("This is correct")
        } else {
            return alert("This not correct")
        }

    }
    render() {


        return(
            <div>
                <form className="search-form" onSubmit={this.onSubmit}>
                    <input type="text" value={this.state.input} placeholder="Our great memory" onChange={this.onInput}/>
                    <button type="submit">Try that!</button>
                </form>
            </div>
        )
    }
};

export default Search;

Upvotes: 0

Views: 1748

Answers (2)

kooskoos
kooskoos

Reputation: 4859

onInput(event) {
        this.setState({
            input: event.target.value,
            submit: event.target.value});,() =>
        console.log(this.state.input)
        console.log(this.state.submit)
 }

This will let you see the correct values in log too.

Your submit state doesn't update as you assign the old value of this.state.input to it rather you should assign event.target.value.

Upvotes: 0

Andreas Engebretsen
Andreas Engebretsen

Reputation: 85

I re-wrote your component for readability, I believe you error is simply that setstate is async. This means that when you tried to set the state of submit at the same time as input, submit would always be one behind. By adding the callback in onInput after input has been set you should get the correct value ready to be submitted

import React, { Component } from 'react';
const results = ["Balaton", "Zamardi", "Sound", "Madarsko", "Sziget", "Hungary"]

class Search extends Component {
        state = {
            input: '',
            submit: ''
        };
   // Added callback after input setstate
    onInput = (event) => {
        this.setState({
            input: event.target.value}, () => this.setState({submit: this.state.input));
        console.log(this.state.input)
        console.log(this.state.submit)
    }

    onSubmit = (event) => {
        event.preventDefault()
        if (results.includes(this.state.input)){
            return alert("This is correct")
        } else {
            return alert("This not correct")
        }

    }
    render() {
        return(
            <div>
                <form className="search-form" onSubmit={this.onSubmit}>
                    <input 
                    type="text" 
                    value={this.state.input} 
                    placeholder="Our great memory" 
                    onChange={this.onInput}/>
                    <button type="submit">Try that!</button>
                </form>
            </div>
        )
    }
};

export default Search;

Upvotes: 1

Related Questions