CODEWITHSUNDEEP
javascriptreactjsreact-native
craftdeer
craftdeer

Reputation: 1047

How to change parent's state from child component in react native?

I have a parent component App.js which looks like this

  export default class App extends React.Component {
   constructor(){
     super();
     this.state = {
            registerusername: '',
     }
    }

Now I have a child component ChildComp.js which is a direct child of App.js and looks like this

  class ChildComp extends React.Component {
   render() {
    return (
    <View>
        <TextInput
                placeholder="Username"
                placeholderTextColor = 'black'
                onChangeText={(registerusername) => this.setState({registerusername})}
            />
       <Text>
         {this.state.registerusername.split(' ').map((word) => word && '🍕').join(' ')}
       </Text>
    </View>
       }
     }

I am attempting to change print the pizza logo just like the react native document under the TextInput field. I am having a hard time understanding how I can do this when the state, registerusername is in parent component and the ChildComp is stateless. I am doing `this.setState({registerusername})} in my ChildComp but I dont think it is referencing the parent's state.

Upvotes: 2

Views: 4206

Answers (1)

Omar
Omar

Reputation: 3411

in app'

setName = (name) => {
  this.setState({ registerusername: name })
}

render() {
  return (
    <div>
      <ChildComp registerusername={this.state.registerusername} setName={this.setName} />
    </div>
  )
}

in ChildComp

  < TextInput
placeholder = "Username"
placeholderTextColor = 'black'
onChangeText = {(e) => this.props.setName(e.target.value)}
/>

  < Text >
  { this.props.registerusername.split(' ').map((word) => word && '🍕').join(' ') }
           </Text >

Upvotes: 3

Related Questions