Run function on load on .map element in React

Question

I have a set of components being rendered from a .map() function in my React application.

I have a function that fires on element's onClick which works great. However, I also need to fire this function automatically on a specific element when the page loads.

Here's a rather rudimentary example: https://codesandbox.io/s/ecstatic-cartwright-ve84yt.

So in the example, I have an array of 5 names, when you click the card, the field at the bottom displays the name of the selected card. What I'm trying is to pre-select (Without using setState's initial value) one of the cards.

user_11887902 · Answer

If the selectedName is not initialize, select first name in the list.

Selected Name: {this.state.selectedName || names[0]}

https://codesandbox.io/s/little-hill-wv4200

user_9512447 · Answer

If you want to preselect. You have to use componentDidMount lifecycle react method. It will be fired after your component will be rendered.

  componentDidMount() {
    this.setState({
      selectedName: names[1]
    });
  }

Run function on load on .map element in React

2 Answers