CODEWITHSUNDEEP
reactjseventscomponents
Dolidod Teethtard
Dolidod Teethtard

Reputation: 623

Add onclick event in custom render function (create react app)

Its my component:

export default class placesList extends Component {
    constructor(props) {
      super(props);
      console.log(JSON.parse(localStorage.getItem('PlacesList')));
    }

    getComponent(){
      console.log("getComponent hello")
    }

    render() {
      let places = JSON.parse(localStorage.getItem('PlacesList'));

      function PlacesList(props) {
        const content = props.places.map((place) =>
          <div key={place.id} className="mt-5">

            <a href="#" className="place_link">
              <header onClick={this.getComponent.bind(this)}>
                <h4> {place.name} </h4>
              </header>
            </a>
            <div className="info mt-3">
              Address: {place.vicinity} <br/>
              Rating: {place.rating} <br/>
              Price level: {place.price_level} <br/>
            </div>

          </div>
        );

        return (
          <div>
            {content}
          </div>
        );
      }

      return (
        <div className="component-places-list">

          <div className="containter">
            <div className="row">

              <header className="col-12 px-5 mt-5 mb-2">
                <h2> Here are results: </h2>
              </header>

              <div className="spacer col-1"></div>
              <main className="results col-10">

                <PlacesList places={places} className=""/>

              </main>
              <div className="spacer col-1"></div>

            </div>
          </div>

        </div>
      );
    }

  }

And it throws: "Uncaught TypeError: Cannot read property 'getComponent' of undefined". My target is to call "getComponent" function in "html code" (JSX) returned by "PlacesList" function. How can I do it? When I show "this" in console in "PlacesList" function its undefined, so I probably have to bind "this" to PlacesList function.

Upvotes: 0

Views: 66

Answers (3)

ghazouan badr
ghazouan badr

Reputation: 486

when you type this.getComponent.bind(this) just you bind the getComponent function to this object and not calling it,

you can get rid of the binding by using arrow function like :

<a href="#" className="place_link">
              <header onClick={(event)=>this.getComponent(event)}>
                <h4> {place.name} </h4>
              </header>
            </a>

Upvotes: 0

Giang Le
Giang Le

Reputation: 7044

Cause this in that case reference to PlacesList not class placesList.So try this. 

function PlacesList(props) {
        const content = props.places.map((place) =>
          <div key={place.id} className="mt-5">

            <a href="#" className="place_link">
              <header onClick={props.getComponent}>
                <h4> {place.name} </h4>
              </header>
            </a>
            <div className="info mt-3">
              Address: {place.vicinity} <br/>
              Rating: {place.rating} <br/>
              Price level: {place.price_level} <br/>
            </div>

          </div>
        );

        return (
          <div>
            {content}
          </div>
        );
      }


export default class placesList extends Component {
    constructor(props) {
      super(props);
      console.log(JSON.parse(localStorage.getItem('PlacesList')));
    }

    getComponent(){
      console.log("getComponent hello")
    }

    render() {
      let places = JSON.parse(localStorage.getItem('PlacesList'));

      return (
        <div className="component-places-list">

          <div className="containter">
            <div className="row">

              <header className="col-12 px-5 mt-5 mb-2">
                <h2> Here are results: </h2>
              </header>

              <div className="spacer col-1"></div>
              <main className="results col-10">

                <PlacesList getComponent={this.getComponent.bind(this)} places={places} className=""/>

              </main>
              <div className="spacer col-1"></div>

            </div>
          </div>

        </div>
      );
    }

  }

Upvotes: 0

Janiis
Janiis

Reputation: 1576

You have to bind getComponent method in constructor of the class.

constructor(props) {
  super(props);
  this.getComponent = this.getComponent.bind(this);
}

Then pass the function to component.

<PlacesList places={places} getComponent={this.getComponent} className="" />

And then change onClick of the header to:

<header onClick={props.getComponent}>
    <h4> {place.name} 1</h4>
</header>

Working example: https://codesandbox.io/s/billowing-frog-weh4l

Upvotes: 1

Related Questions