Getting a changed variable to show up in `render`

Question

Probably a simple question with a simple answer, but I can't figure this out. Blame the heat. My simulator prints 'this is a test' on the screen, when I want it to say 'changed'. What am I doing wrong?

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Template from './src/components/Template';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.foo= "this is a test";
  }

  changeMe = () => {
    this.foo = 'changed';
  }

  componentDidMount(){
    this.changeMe();
  }

  render() {
    return (
      <Template foo={this.foo} />
    );
  }
}

seems you haven't grasped the react way of doing things – Aseem Upadhyay Jul 12 '18 at 15:11 — Aseem Upadhyay, Jul 12 '18 at 15:11

Joe Lloyd · Accepted Answer · 2018-07-13T09:00:48.223

Use state

You are using a class attribute witch will not trigger a re-render when changed. In react a component will re-render when it receives new props or when the state is changed (there's also a way to force it but best not to do that).

Example using the state to trigger a rerender

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Template from './src/components/Template';

export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state ={foo: "this is a test"};
    }

    changeMe = () => {
        this.setState({foo:'changed'})
    }

    componentDidMount(){
        this.changeMe();
    }

    render() {
        return (
            <Template foo={this.state.foo} />
        );
    }
}

When passing new props to a component it will also re-render (unless you implement componentShouldUpdate).

State explanation

So inside a react component you have a local state object in this.state it can be set in the constructor like this.state = {bar: 'foo'};. After the constructor has set the state it should only be changed with the this.setState() method.

Upon changing the state with setState the component will re-render with the updated values.

The state is not available outside of the component, at least not available as this.state because that would call the local state of the current component.

If you need to use a value from the state of a parent component you can pass it to a child. At that point it becomes a prop of the child accessible with this.props

To change the value of state from a child component you should pass a function to the child that changes the state of the parent.

This process of passing state changing functions becomes increasingly complex as your app grows, I would suggest using a library like Redux to manage app state via actions and reducers. There is a steep learning curve but once you have a grasp of this modified flux methodology you will wonder how you ever lived without it.

Thank you for your help. I've run into a different problem changing state from a different component now: https://stackoverflow.com/questions/51316385/changing-state-from-a-child-component — smilebomb, Jul 13 '18 at 01:07

Getting a changed variable to show up in `render`

1 Answers1

Use state

Example using the state to trigger a rerender

State explanation