CODEWITHSUNDEEP
reactjsrxjs
Downpooooour
Downpooooour

Reputation: 35

how to make an observable in react with other library

i have a component which return a <TextInput /> that i import from other library. the TextInput has a onChange prop which take a function function(value) { // do something with value}.so how can i make an observable with that value and use that observable anywhere?

import TextInput from 'otherLibrary';
import Rx from 'rxjs/Rx';

export default class MyComponent extends PureComponent {

    handleTextChange = (value) => {
        this.observable = Rx.observable.from(value).do(() => console.log(value))
        // how to make an observable with `value`? If i just make it like this, every time input a letter in the TextInput will make a new observable, that's not correct.
    }
    render() {

        return (

                    <TextInput
                        defaultValue=""
                        onChange={this.handleTextChange}
                    />

        );
    }
}

Upvotes: 2

Views: 1271

Answers (1)

Rob van Dijk
Rob van Dijk

Reputation: 722

If your component is a react compoment, in onChange you could store this in the component's state using 

this.setState({textInputValue: value})

(to get the correct this you need to change the onchange callback to the following:)

<TextInput
        defaultValue=""
        onChange={this.handleTextChange.bind(this)}
/>

Now, whenever that state changes, and you are for example, passing that state as a prop to another component, that component will re-render.

To get the actual value out of the textinput in on change if I recall correctly, you should use value.target.value, and maybe rename the value parameter to something else to avoid confusion, like 

handleChange = (e) => {..

value= e.target.value

Upvotes: 1

Related Questions