ReactJS - How to get what a user types in a text input to pass to a callback function

Question

I have a component that I would like to use to change its parent's state with a text input box. Right now, I have a callback function called sendData that I'm using to pass information back to the parent. It's working, but is currently just passing the hard-coded string "hi". I would like to replace this string with whatever has been entered into the text input.

Here is my code:

class ChangeState extends Component {
    sendData = () => {
        this.props.parentCallback("hi");
    }

    render() {
        return (
            <div>
                <input type="text" name="name" id="myTextInput" />
                <button onClick={this.sendData}>
                    Click to send data from child to parent component
                </button>
            </div>
        );
    }
}

How would I go about doing this? Thanks!

https://reactjs.org/docs/forms.html Check out the "handleChange" function in the "Controlled Components" example — CollinD, Sep 25 '19 at 21:05
Possible duplicate of [How to get the value of an input field using ReactJS?](https://stackoverflow.com/questions/36683770/how-to-get-the-value-of-an-input-field-using-reactjs) — Emile Bergeron, Sep 25 '19 at 21:10

score 1 · Answer 1 · answered Sep 25 '19 at 21:06

1

You have to capture the event in your callback and get the value from it

sendData = e => {
    this.props.parentCallback(e.target.value)
}

And change onClick to onChange

answered Sep 25 '19 at 21:06

Raul Rene

10,014
9
53
75

1

this answer is not entirely correct. Even though it solves the problem, he needs to understand about forms and state, and about 'single source of truth' in React . – Noob Sep 25 '19 at 21:09

score 0 · Answer 2 · answered Sep 25 '19 at 21:07

0

You can add a onChange attribute to the input field , this will handle the typing as an event.

const handleChange = ( event ) => {
 console.log(event.target.value)
}
<input onChange={handleChange} type="text" name="name" id="myTextInput" />

answered Sep 25 '19 at 21:07

Ricardo Gonzalez

1,827
1
14
25

score 0 · Answer 3 · answered Sep 25 '19 at 21:20

you should make the handleChange() function in ChangeState class and get the value.

for example:

class ChangeState extends React.Component {

    state = {value: ''};
    
    handleChange = (e) => {
       this.setState({value: e.target.value});
    }
    
    sendData = () => {
        this.props.parentCallback(this.state.value);
    }
    
    render() {
        return (
            <div>
                <input type="text" value={this.state.value} onChange={this.handleChange} />
                <button onClick={this.sendData}>
                    Click to send data from child to parent component
                </button>
            </div>
        );
    }
}
class Application extends React.Component {

    state = {value: ''};
    
    handleClick = (value) => {
       this.setState({value});
    }
    
    render() {
        return (
            <div>
                <ChangeState parentCallback={this.handleClick} />
                <div style={{border: '1px solid red', width: '100%', height: 20}}>{this.state.value}</div>
            </div>
        );
    }
}
React.render(<Application />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
<div id="app"></div>

ReactJS - How to get what a user types in a text input to pass to a callback function

3 Answers3