CODEWITHSUNDEEP
javascriptreactjs
Sunil Sandhu
Sunil Sandhu

Reputation: 1

Updating a React prop with setTimeout()

I'm trying to use React for the first time and am looking for a way to push the contents of an array that updates with new data every 4 seconds into a H3 tag. I know that this could be achieved with vanilla JS but want to know if there is a nice, clean way to do this through the React ecosystem.

At the moment the function runs and the console log shows that the array is being updated at precise intervals, however, the actual H3 tag stays empty.

I've tried to utilise componentHasMounted() and tried to look at ways to put the render() function inside of the professions() function but couldn't figure out a way to properly encapsulate it (if that is even possible). I've also tried to follow the new Date() tutorial for updating rendered elements in the React docs but to no avail - I'm sure it's likely to be a mistake at my end but any help from the SO community would rock.

Heads up, I'm using create-react-app for this.

Here's the code:

Profession.js

import React, { Component } from 'react';
import './Profession.css';

class Profession extends Component {
  constructor(props) {
      super(props);
      this.state = {profession: professions()};
  }

  render() {
    return (
      <div className="Profession">
          <div className="keyboard">
          <h3>{this.state.profession}</h3>
          </div>
      </div>
    );
  }
}

function professions() {
    const professionList = ['Developer', 'Designer'];
    var profession = [];
    for (var i = 0; i < professionList.length; i++) {
        setTimeout(function (i) {
            return function () {
                profession = [];
                profession.push(professionList[i]);
                console.log(profession);
                return profession;
            }
        }(i), 3800*i);
    }
}




export default Profession;

And App.js just in case

import React, { Component } from 'react';
import './App.css';
import Profession from './Profession'

class App extends Component {
  render() {
    return (
      <div className="App">


        <h1>Sunil<br/>Sandhu</h1>
        <Profession />
      </div>
    );
  }
}

export default App;

Upvotes: 1

Views: 3013

Answers (1)

Rahul Desai
Rahul Desai

Reputation: 15501

Set the local state profession inside professions() and not in constructor. Also, professions() should be a part of the component so that it can update local state. This will trigger the component to update and update H3. 

import React, { Component } from 'react';
import './Profession.css';

class Profession extends Component {
  constructor(props) {
    super(props);

    // set 'profession' default to null
    this.state = {profession: null};

  }

  componentDidMount() {
    // call professions() here
    this.professions();
  }

  professions() {
    const professionList = [
      'Sunny',
      'Developer',
      'Designer',
      'Programmer',
      'Notebook Hoarder',
      'Developer',
    ];

    for (let i = 0, l = professionList.length; i < l; i++) {
      setTimeout(() => {
        // update local state property 'profession'
        that.setState({ profession: professionList[i] });
      }, 4000*i);
    }
  }

  render() {
    return (
      <div className="Profession">
        <div className="keyboard">
          <h3>{this.state.profession}</h3>
        </div>
      </div>
    );
  }
}

export default Profession;

Hope it helps :)

Upvotes: 1

Related Questions