react - pass parent value to child input value

Question

I am new to reactjs. What is the proper way to pass the parent value to child setState, I am having error says below, and I am unable to change input value, the value looks correct but unable to be changed.

"is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component"

export default class parent extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            title: ''
        }
    }

    updateFun(){
        this.setState({title: 'Parents title'});
    }

    render() {
        return (
            <div>
            <button onClick={() => this.updateFun()}> Update </button>
            <Child title = {this.state.title}/>
            </div>
        )
    }
}


export default class Child extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            title: ''
        }
    }

    render() {
        return (
            <div>
            <input 
                id="title" 
                type="text"
                value={this.props.title}
                />
            </div>
        )
    }
}

i think error is not in this part, this code looks proper, check working Fiddle there is one issue only, name of the parent component, it should be Parent check this answer for reason. — Mayank Shukla
– Mayank Shukla, Commented Aug 1, 2017 at 12:44
I agree with @MayankShukla. The code works fine as you posted it. It is, however, a bit unclear exactly what you want to do. Do you want the child to have its own state or should the Parent control all states? You have a title state in your Child that you never use. It's also unclear why you have a button that updates the input value with a static text. — Chris
– Chris, Commented Aug 1, 2017 at 12:45

Yurii Kramarenko · Accepted Answer · 2017-08-01 12:53:02Z

6

You need to use defaultValue instead of value. Also you must add onChange handler to your input. To handle input changes.

Child example

export default class Child extends React.Component {
constructor (props) {
    super(props);
    this.state = {
        title: props.title
    }

    this.handler = this.handler.bind(this);
}

handler(event) {
    console.log(event.target.value);

    this.setState({title: event.target.value});
}

render() {
    return (
        <div>
        <input 
            id="title" 
            type="text"
            defaultValue={this.state.title}
            onChange={this.handler}
            />
        </div>
    )
}}

edited Aug 1, 2017 at 12:53

answered Aug 1, 2017 at 12:44

Yurii Kramarenko

1,0746 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zeena Over a year ago

Worked nicely for me. Also noticed that the constructor block could be avoided. Thanks.

Collectives™ on Stack Overflow

react - pass parent value to child input value

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related