Good morning,

I have a Child class, and in this class I have 3 inputs. I want to merge them into a one string with my modifications of this and then pass it to Parent component class. I will do that by Lifting state up, and its working.
However the problem is, that my React do not get updated when I am writing input - there is always missing one letter. Like it wouldn't update on basis. (screeshot - I typed "Thre" but it showed me only "Thr")

I read that it might be a problem with setState as it is asynchronous or add key, tried both but still I have this issue.

Can you please advise? Thank you

Parent class:

 export default class Parent extends Component {

      constructor(props) {
        super(props);
        this.state = { stringToPass: '' };
        this.handleTextChange = this.handleTextChange.bind(this);
      }

      handleTextChange(newText) {
        this.setState({ stringToPass: newText });
      }

      render() {
        return (
          <div>
            <Child text={this.state.stringToPass} handleTextChange={this.handleTextChange} />
            <p>I am in Parent component and string is: {this.state.stringToPass || ''}</p>
          </div>
        )
      }
    }

Child class:

export default class Child extends Component {
    constructor(props) {
        super(props);
        this.handleTextChange = this.handleTextChange.bind(this);
        this.onHandleChange = this.onHandleChange.bind(this);
        this.state = { text: '', test: '' };
    }
    handleTextChange(event) {
        this.props.handleTextChange(event.target.value);
    }
    onHandleChange(event) {
        this.setState({
            [event.target.name]: event.target.value
        })
        this.state.furn = (this.state.Value1   "__X__"   this.state.Value2   "__X__"   this.state.Value3);
        this.props.handleTextChange(this.state.furn);
      
    }
    render() {
        return (
            <div>
                <label>Value1</label>
                <td>
                    <input type="text" name="Value1" value={this.state.Value1 || ""} onChange={(this.onHandleChange)} />
                </td>
                <label>Value2</label>
                <td>
                    <input type="text" name="Value2" value={this.state.Value2 || ""} onChange={(this.onHandleChange)} />
                </td>
                <label>Value3</label>
                <td>
                    <input type="text" name="Value3" value={this.state.Value3 || ""} onChange={(this.onHandleChange)} />
                </td>
                <p> I am in Child component and string is: {this.state.furn}</p>
            </div>
        );
    }
}

CodePudding user response：

you should use setState while state update.

this.setState(state =>              
({
    ...state,
    furn : (state.Value1   "__X__"   state.Value2   "__X__"   state.Value3)
 }))