onClick property fired when component is rendered react

Question

Hi I am building a frontend in react and I am rendering a List of places that I get from google maps api. I want each place to fire an action on onClick. If I don't pass any value it works, if I pass the id of the place that I get from props than onClick is fired when the list item is rendered leading to an error. Here is the list component

import {ListGroup} from "react-bootstrap";
import {useDispatch} from "react-redux";
import {selectedPlace} from "../../actions/searchActions";

const PlaceList=function (props) {
    const dispatch=useDispatch()

    const handleClick=function (id) {
        console.log('ciao '+id)
    }
    return(
        <ListGroup>
        {props.places.map(item=>{
            return (<ListGroup.Item variant="flush" onClick={handleClick(item['place_id'])}>{item['formatted_address']}</ListGroup.Item>)
        })}
        </ListGroup>
    )
}

export default PlaceList

I want the onClick to be fired just when the list item is clicked. Any Idea on how to solve?

As with the many duplicates, don’t call the function at binding. The binding site should evaluate to a function, and this returned function is the callback. Having the handleClick (call it handleClickCreator) return a closure is one method, as is creating a simple wrapping lambda. Behavior is discussed in https://reactjs.org/docs/handling-events.html as well. — user2864740, Sep 26 '20 at 16:42

score 0 · Answer 1 · answered Sep 26 '20 at 16:41

0

onClick functions should be called like this!

import { ListGroup } from "react-bootstrap";
import { useDispatch } from "react-redux";
import { selectedPlace } from "../../actions/searchActions";

const PlaceList = (props) => {
  const dispatch = useDispatch();

  const handleClick = (id) => {
    console.log('ciao ' + id)
  }
  return (
    <ListGroup>
      {
        props.places.map(item => {
          return (<ListGroup.Item variant="flush" onClick={() => handleClick(item['place_id'])}>{item['formatted_address']}</ListGroup.Item>)
        })
      }
    </ListGroup>
  )
}

export default PlaceList

answered Sep 26 '20 at 16:41

Veno

433
2
14

No, it shouldn't. It's not recommended to use arrow functions within JSX. – kind user Sep 26 '20 at 16:43
@kinduser squse mi? What would be the problem doing so? – Angel Zlatanov Sep 26 '20 at 16:46
@AngelZlatanov performance downsides. – kind user Sep 26 '20 at 16:47
1

@kinduser haven't seen any with 2000 rendered items mapped from array with a 500 lines of not so complex functionality. – Angel Zlatanov Sep 26 '20 at 16:48

score 0 · Answer 2 · answered Sep 26 '20 at 16:43

0

Your onClick should be calling the function like this:

import { ListGroup } from 'react-bootstrap';
import { useDispatch } from 'react-redux';
import { selectedPlace } from '../../actions/searchActions';

export default (props) => {
  const dispatch = useDispatch();

  const handleClick = (id) => {
    console.log('ciao ' + id);
  };

  return (
    <ListGroup>
      {props.places.map((item) => (
        <ListGroup.Item variant="flush" onClick={() => handleClick(item['place_id'])}>
          {item['formatted_address']}
        </ListGroup.Item>
      ))}
    </ListGroup>
  );
};

answered Sep 26 '20 at 16:43

Angel Zlatanov

288
1
5

He wants an answer without arrow functions it seems! @Angel Zlatanov – Veno Sep 26 '20 at 16:52
1

@Veno then he should have specified that. Also in a hook makes no difference but w/e. – Angel Zlatanov Sep 26 '20 at 17:00
Yes, but he will not use arrow functions, so he can possibly use class and bind to this on constructor? – Veno Sep 26 '20 at 17:04
We are not oracles, he should be more specific on what he intends to do. – Angel Zlatanov Sep 26 '20 at 17:14
Yes exactly.... – Veno Sep 26 '20 at 17:17

onClick property fired when component is rendered react

2 Answers2