How to access one control property in another control in ReactNative - react-native

Question

I want to access this.state.sampleString from HelloWorldApp component
class to CustomWebView component class in react native, but in alert
this.props.sampleString showing 'undefined'.
Here is my code:
class CustomWebView extends Component{
constructor(props){
super(props);
this.state = { text: 'http://www.google.com' };
}
render() {
alert(this.props.sampleString);
return (
<WebView
source={{uri:this.state.text}}
style={{marginTop: 50}}
/>
);
}
}
export default class HelloWorldApp extends Component {
constructor(props) {
super(props);
this.state = { sampleString: 'http://www.google.com' };
this.getValue = this.getValue.bind(this);
}
getValue(){
//console.log(this.state.sampleString);
return this.state.sampleString
}
handleClick = () => {
alert(this.state.sampleString);
}
render(){
const {isFocused} = this.state;
const{onFocus,onBlur} = this.props;
return (
<View style={{
flexDirection: 'column',
height: '100%',
paddingTop: 36
}}>
<View style={{
flexDirection: 'row',
height : '5%',
width : '100%',
justifyContent: 'flex-start',
paddingBottom:3,
paddingTop:1,
marginTop : 20
}}>
<TextInput
selectionColor = {BLUE}
ref = "urltext"
underlineColorAndroid={isFocused?BLUE:LIGHT_GRAY}
onFocus = {this.handleFocus}
onBlur ={this.handleBlur}
style={styles.textInput}
onChangeText={(sampleString) => this.setState({sampleString})}
value={this.state.sampleString}
/>
<Button title="Submit"
onPress = {this.handleClick.bind(this)}
color="#9933ff"
accessibilityLabel="TestButton"/>
</View>
<CustomWebView/>
</View>
);
}
}
})
I need to change url in class CustomWebView on the onPress event of Button in
HelloWorldApp class. And that's why i want to access this.props.sampleString in CustomWebView class.

Answer 1

use CustomWebView like this
<CustomWebView
sampleString={this.state.sampleString}
/>

Answer 2

Please do it as following:
<CustomWebView
sampleString={this.state.sampleString}
/>
on CustomWebView, you should use the props - sampleString, not state variable - text.
class CustomWebView extends Component{
constructor(props){
super(props);
this.state = { text: 'http://www.google.com' };
}
render() {
alert(this.props.sampleString);
return (
<WebView
source={{ uri: this.props.sampleString }}
style={{ marginTop: 50 }}
/>
);
}
}

Answer 3

First of all, you are using the wrong method to update the state at onChangeText as,
onChangeText={(sampleString) => this.setState({sampleString})}
when you use above method you can get an error like,
sampleState is not defined
because you have to define which state you want to update with the updated value in setState method. You have to update state as,
onChangeText={(inputText) => this.setState({sampleString: inputText})}
And then you can pass this sampleString in CustomWebView as prop,
<CustomWebView uri = {this.state.sampleString} />
Finally, you can access this prop in CustomWebView as,
<WebView
source={{ uri: this.props.uri }}
style={{ marginTop: 50 }}
/>
And all done :)
Note: - Because you are updating state at onChangeText, and simultaneously passing this state as prop in CustomWebView. CustomWebView can access this state without button click.

Answer 4

you have to take two state variable. fist for textInput and second is for rendering Webview, which you have to pass in CustomWebView component.
Your HelloWorldApp class should be like following:
export default class HelloWorldApp extends Component {
constructor(props) {
super(props);
this.state = {
textInputData: 'http://www.google.com'
sampleString: 'http://www.google.com'
};
}
handleClick(){
//set sampleString when click on button
this.setState({
sampleString: this.state.textInputData
})
}
render(){
const {isFocused} = this.state;
const{onFocus,onBlur} = this.props;
return (
<View style={{
flexDirection: 'column',
height: '100%',
paddingTop: 36
}}>
<View style={{
flexDirection: 'row',
height : '5%',
width : '100%',
justifyContent: 'flex-start',
paddingBottom:3,
paddingTop:1,
marginTop : 20
}}>
<TextInput
selectionColor = {BLUE}
ref = "urltext"
underlineColorAndroid={isFocused?BLUE:LIGHT_GRAY}
onFocus = {this.handleFocus}
onBlur ={this.handleBlur}
style={styles.textInput}
onChangeText={(inputText) => this.setState({textInputData: inputText})}
value={this.state.textInputData}
/>
<Button title="Submit"
onPress = {this.handleClick.bind(this)}
color="#9933ff"
accessibilityLabel="TestButton"/>
</View>
<CustomWebView
sampleString={this.state.sampleString} />
</View>
);
}
} })
and you will get updated sampleString in componentWillReceiveProps() of CustomWebView component
class CustomWebView extends Component{
constructor(props){
super(props);
this.state = {
text: 'http://www.google.com'
};
}
componentWillMount(){
this.setState({ text:this.props.sampleString })
}
componentWillReceiveProps(newProps){
//when will you update url in textinput and do submit. you will get updated
sampleString here.
this.setState({ text:newProps.sampleString })
}
render() {
return (
<WebView
source={{uri:this.state.text}}
style={{marginTop: 50}}
/>
);
}
}