CODEWITHSUNDEEP
react-native
harry
harry

Reputation: 250

dynamic text change in react-native

Hi I am looking for the solution to change text dynamically. I am writing code to show processing results on screen.

After some googling, I found there is a code to update text dynamically as follows.

But I would like to update text without any internal event. I want to change text from outside of the class. But I don't know how to implement it as I am a javascript and react-native beginner. There are other classes to process some functions so that I need to show the updated results using Results class which is an another component of the screen.

How can I deliver 'result' to Results class and how to update it dynamically and automatically?

class Results extends Component {

    constructor() {
        super()
        this.state = {
           log: 'Processing results'
        }
    }

    updateText = (result) => {
        this.setState({log: result})
    }

    render() {
        return (
            <View>
                <Text onPress = {this.updateText}>
                    {this.state.log}
                </Text>
            </View>
        )
    }
}

Upvotes: 0

Views: 2847

Answers (2)

Nerdragen
Nerdragen

Reputation: 3210

In addition to what @Issac answered, you can also hook up your current class to Redux and dispatch actions from another class to force state changes.

React Native and ReactJS has a different concept of how classes react to each other. Most other languages use inheritance based interactions to affect changes in classes other than itself. React itself is more composition based where changing the value/state/variable of one class requires either a state change or a prop change. The caveat to that us using Redux, which utilizes an overarching Store where any component that's connected to it can pull values or dispatch actions to change values.

Upvotes: 1

Isaac
Isaac

Reputation: 12894

This sounds to me that props can solve your problem.

Basically when you try to render Results class, pass along the value as a prop like below:

<Results dynamicText='HI' />

Then, from your Results class, access this external value via this.props.dynamicText as below

class Results extends Component {

  render() {
    return (
        <View>
            <Text>
                {this.props.dynamicText}
            </Text>
        </View>
    )
  }
}

Upvotes: 1

Related Questions