React - changing state not updating elements rendered from variable

user_8252164 0
Viewed 124

So, I have stored a component in a variable const span = <span>{this.state.text}</span>. Now when I render this element and update the text within the state. The element is not re-rendered.

So this is my code

class App extends React.Component {
  state = {
    text: 'hey'
  }
  span = <span>{this.state.text}</span>

  render() {
    return (
      <div>
        {this.span}
        <div>State: {this.state.text}</div>
        <button onClick={()=>{this.setState({text: 'hello'})}}>Update</button>
      </div>
    )
  }
}

So even after updating the state, the span has the initial value of the state. Is there any way to make this dynamic? I'm a newbie here.

reactjs javascript
3 Answers

As per your code span is an instance property of App that once set will remain the same through out the lifecycle of your component unless set again manually. You would have to include that span html creation inside the render like so :-

class App extends React.Component {
  state = {
    text: 'hey'
  }
  render() {
    return (
      <div>
         <span>{this.state.text}</span>
        <div>State: {this.state.text}</div>
        <button onClick={()=>{this.setState({text: 'hello'})}}>Update</button>
      </div>
    )
  }
}

This is valid as well :-

class App extends React.Component {
  state = {
    text: 'hey'
  }
  span = <span>{this.state.text}</span>
  render() {
    this.span = <span>{this.state.text}</span>
    return (
      <div>
        {this.span}
        <div>State: {this.state.text}</div>
        <button onClick={()=>{this.setState({text: 'hello'})}}>Update</button>
      </div>
    )
  }
}

The below with having another function like renderSpan is valid as well :-

class App extends React.Component {
  state = {
    text: 'hey'
  }
  renderSpan = function(){
    return <span>{this.state.text}</span>
  }
  render() {
    return (
      <div>
        {this.renderSpan()}
        <div>State: {this.state.text}</div>
        <button onClick={()=>{this.setState({text: 'hello'})}}>Update</button>
      </div>
    )
  }
}

The below is achieved using the shouldComponentUpdate lifecycle method :-

class App extends React.Component {
  state = {
    text: 'hey'
  }
  span = <span>{this.state.text}</span>

  shouldComponentUpdate(nextProps,nextState){
     this.span = <span>{nextState.text}</span>
     return true;
  }

  render() {
    return (
      <div>
        {this.span}
        <div>State: {this.state.text}</div>
        <button onClick={()=>this.setState({text:'hello'})}>Update</button>
      </div>
    )
  }
}

There are just too many ways. It's good to know why all of them work. Knowing their working means to understand both JavaScript (Here specifically ES6 Class) and React (Here specifically Class Components).

user_81306900

span variable is not in state so it can't react to change. Try this


class App extends React.Component {
  state = {
    text: 'hey'
  }

  render() {
    return (
      <div>
        <span>{this.state.text}</span>
        <div>State: {this.state.text}</div>
        <button onClick={()=>{this.setState({text: 'hello'})}}>Update</button>
      </div>
    )
  }
}

or make new component and pass text as prop:

const SpanComponent = ({txt}) => {
   return <span>{txt}</span>
}

and then use it in your component

     <div>
        <SpanComponent txt={this.state.txt} />
        <div>State: {this.state.text}</div>
        <button onClick={()=>{this.setState({text: 'hello'})}}>Update</button>
      </div>

https://codesandbox.io/s/question-forked-noyir?file=/index.js

user_41175990

You should read into React hooks, and for this case useState.

import React, { useState } from "react";

const App = () => {
  const [text, setText] = useState();

  return (
    <>
      <div>
        <div>State: {text}</div>
        <button onClick={() => setText("hello")}>Update</button>
      </div>
    </>
  );
};

export default App;

https://codesandbox.io/s/falling-field-gyft1?file=/src/App.js

user_107469400
Related