Clear input React/Redux?

Question

JavaScript

Good afternoon! Please tell me how to clear the input in react / redux. Now when you click on the button, an entry is added and you need to clear the input. With props is cleared, but the value still remains in the input.
Here is a piece of code

// Компонент Input
   handleChange(event) {
        const {value} = event.target;
        this.props.onChange(value);
        this.setState({value});
    }

    render() {
        return (
                <input
                    type='text'
                    value={this.state.value}
                    onChange={this.handleChange}
                    className='form-control'
                />
    );

// Родительский компонент

  inputOnChange(value) {
        this.setState({todoName: value});
    }

    addTodo() {
        let {todos} = this.props.home;
        const id = todos[todos.length - 1].id + 1;
        const name = this.state.todoName;
        this.props.dispatch(addTodo(id, name));
        this.setState({todoName: ''});
// тут с переменной очищается, а инпут нет
    }

    render() {
        const {todoName} = this.state;
        const {todos, error} = this.props.home;
        return (
            <div className="container-fluid">
                        <div className="col-xs-4">
                            <Input onChange={this.inputOnChange} value={''} error={error}/>
                            <button className="btn btn-primary" onClick={this.addTodo}>Add todo</button>
                        </div>
            </div>

        );
    }

Second question:
Do you use lifecycle methods with redux (componentWillReceiveProps etc..)
I reviewed a lot of tutorials and didn't notice this anywhere.
Thank you in advance)

Answer 1

In the Input component, you use state as the value of the input:
At the same time: you also use the state of the parent component and clear it:

addTodo() {
        // ...
        this.setState({todoName: ''});
    }

Those. You need to either use props.value in the input component, or (in it) implement a mechanism for passing the value from props to state.

Answer 2

Do you use lifecycle methods with redux (componentWillReceiveProps etc..)

Of course we use.
Your "input" is not cleared, since there is no code responsible for this. You can use for example the onBlur event...
ps In general, the code looks a bit strange, maybe it's tricky. It can make the input uncontrolled, leave only "this.props.onChange", and pass the value - todoName to the Input component ... (did not delve into what was happening much) pps about
controlled and uncontrolled components in Russian: , the version is old, but relevant in general), two (off.documentation translations)

Answer 3

Such an option - https://codepen.io/akochemasov/pen/NZBGxN