How to map array outside of render function to setState?

Question

I'm trying to map over an array of a fetched API to separate the individual items with the same name, and setState based on that individual item property. For instance, the array returns multiple different items with different latitudes and longitudes. I am able to setState using a function in the onClick inside the render function, however I know this is bad practice. I've tried moving the function outside of render and using onClick={this.functionName}, but this gives weird behavior. What am I doing wrong?

here is the function I created outside of the render:

 mapItem = () => {
    const parks = [...this.state.parks];
    parks.map(item =>
      this.setState({
        lat: item.latitude,
        lng: item.longitude,
        zoom: 16
      })
    );
  };

  render() {
    return (<h2 onClick={this.mapItem}>{item.name}</h2>)
    }

this works:

render() {
const { parks } = this.state;
    return(
{parks.map(item => (
<h2 onClick={() => this.setState({lat: item.latitude, 
             lng: item.longitude, zoom: 16})
             }>{item.name}</h2>
))
)}}

thank you

Liren Yeo · Accepted Answer · 2019-02-17 06:29:00Z

1

This is how you can move the onClick event handler outside of render():

  handleClick = item => {
    this.setState({
      lat: item.latitude,
      lng: item.longitude,
      zoom: 16
    })
  }

  render() {
    const { parks } = this.state

    return (
      <>
        {parks.map(item => (
          <h2
            onClick={() => {
              this.handleClick(item)
            }}
          >
            {item.name}
          </h2>
        ))}
      </>
    )
  }

If you are trying to avoid any inline-functions in render() (because each render will create a new instance of that function), then you will have to create a separate component for each parks's item:

// ParkItem functional component
const ParkItem = ({item}) => {
  const handleClick = () => {
    this.props.setCoordinate({
      lat: item.latitude,
      lng: item.longitude,
      zoom: 16
    })
  }

  return <h2 onClick={handleClick}>{item.name}</h2>
}

class YourCurrentClass extends Component {
  setCoordinate = stateObj => {
    this.setState(stateObj)
  }

  render() {
    const { parks } = this.state

    return (
      <>
        {parks.map(item => (
          <ParkItem item={item} />
        ))}
      </>
    )
  }
}

export default YourCurrentClass

edited Feb 17, 2019 at 6:29

answered Feb 17, 2019 at 5:50

Liren Yeo

3,4592 gold badges24 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alvin S. Lee Over a year ago

Your comment on my answer is correct. Thank you for pointing this out. I must have read the post too quickly. I'm withdrawing my answer. 👍🙏

Collectives™ on Stack Overflow

How to map array outside of render function to setState?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related