CODEWITHSUNDEEP
javascriptarraysreactjssetstate
CERFECTUS
CERFECTUS

Reputation: 45

setting the state at the beginning

function returns a random string every 10 seconds, I want to set a word from inside the array of strings at the beginning of the function

I tried to set state inside at the start of the life cycle

  componentDidMount(){
    this.setState({
        randomItem: 
  this.setState({randomItem:this.randomItemGenerator()})
    },
    this.interval = setInterval(() => {
        this.setState({randomItem:this.randomItemGenerator()})
    }, 10000)
  });

-Component

class Word extends Component {
state={
    randomItem:''
}

myArray = [
    "esplendor",
    "diciendo",
    "impredecible",
    "problema",
    "terreno",
    "instante",
];

randomItemGenerator = () => (
    this.myArray[Math.floor(Math.random()*this.myArray.length)]
)

componentDidMount(){
    this.setState({
        randomItem: this.setState({randomItem:this.randomItemGenerator()})
    },
    this.interval = setInterval(() => {
        this.setState({randomItem:this.randomItemGenerator()})
    }, 10000)
});




render(){
   return(
      <div><h3>{this.state.randomItem}</h3></div>
   )
}
}

is there another lifecycle before componentdidmount?

Upvotes: 0

Views: 51

Answers (2)

Ori Drori
Ori Drori

Reputation: 191976

Since the myArray and randomItemGenerator don't use props or other state, you can move the outside of the component, and use them when you initialise the state.

const myArray = [
  "esplendor",
  "diciendo",
  "impredecible",
  "problema",
  "terreno",
  "instante",
]

const randomItemGenerator = () => (
  myArray[Math.floor(Math.random() * myArray.length)]
)

class Word extends React.Component {
  state = {
    randomItem: randomItemGenerator()
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState({
        randomItem: randomItemGenerator()
      })
    }, 10000)
  }
  
  componentWillUnmount() { // clear the interval when the component is unmounted
    clearInterval(this.interval);
  }

  render() {
    return (
      <div><h3>{this.state.randomItem}</h3></div>
    )
  }
}

ReactDOM.render(
   <Word />,
  root
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

However, you might want to get the array of words from props. In this case, change the randomItemGenerator to accept an array as it's param, and pass the relevant property (words in the example) when you call the function.

const randomItemGenerator = (words) => (
  words[Math.floor(Math.random() * myArray.length)]
)

class Word extends React.Component {
  state = {
    randomItem: randomItemGenerator(this.props.words)
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState({
        randomItem: randomItemGenerator(this.props.words)
      })
    }, 10000)
  }
  
  componentWillUnmount() { // clear the interval when the component is unmounted
    clearInterval(this.interval);
  }

  render() {
    return (
      <div><h3>{this.state.randomItem}</h3></div>
    )
  }
}

const myArray = [
  "esplendor",
  "diciendo",
  "impredecible",
  "problema",
  "terreno",
  "instante",
]

ReactDOM.render(
   <Word words={myArray} />,
  root
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Upvotes: 1

ezakto
ezakto

Reputation: 3194

Just call your function in the state initialization:

class Word extends Component {
    state = {
        randomItem: this.randomItemGenerator()
    }

Upvotes: 1

Related Questions