React, add onClick event on dynamically loaded div element.

Question

Currently on my react app, I am loading many div's which is being dynamically loaded with info from a database. I am trying to make it so when I click on one of these div's a Pop-up emerges, with more in depth data related to that div. However, it does not seem to work as expected. The onClick does not work with this dynamically loaded div. I tried testing the pop-up on a standard button element on my main App component and it worked. Here is my code:

class ResultBox extends Component {
  constructor(props){
  super(props);
  this.state = {
    showPopup: false,
    posts: []
  };
}
  togglePopup() {
    this.setState({
    showPopup: !this.state.showPopup
  });
 }
   componentDidMount() {
    axios.get('http://localhost:3001/api/events')
      .then(res => {
      let posts = res.data.map(obj => obj);
      this.setState({posts});
      console.log(posts);
     });
  }
  render() {                 ********** Below here is where my issue is *****
    return (
      this.state.posts.map(events =>
      <div key={events.key} 
        className='result_box' 
        onClick={this.togglePopup.bind(this)}>

       <p>{events.name}</p>
        {events.place && events.place.location && <p>
        {events.place.location.city}</p>}
        </div>
     )
         {this.state.showPopup ?
           <Result
           text='Close Me'
           closePopup={this.togglePopup.bind(this)}
          />
         : null
        }
    );
 }
 }

And this ResultBox is being rendered in App

 class App extends Component {

 render() {
   return (
      <div className="App">
        <NavBar className="navbar-body"/>
        <div className="spacer"></div>
        <p className="App-intro">
           Find a jam
         </p>
      <ResultBox />

     </div>
   );
 }
}

The Result is simply the pop-up box component. If anyone knows how I can get this to work it would be much appreciated.

"However, it does not seem to work as expected" what's the current behavior? — VdeVentura
– VdeVentura, Commented Oct 30, 2017 at 23:31
Problem was fixed. Turns out I had to have my mapping enclosed in its own js call, separate from the toggle js all. And enclose call of it in a single div! — kpo1
– kpo1, Commented Oct 31, 2017 at 1:15
so you had it working? can you show the working code? i have the same issue — Jeff
– Jeff, Commented Mar 3, 2020 at 22:35

Ruben Escudero · Accepted Answer · 2017-10-31 01:29:04Z

Yes, you need to have your posts data in a div, this is how I would structure it.

class ResultBox extends Component {

  constructor(props){

  super(props);

      this.state = {
        showPopup: false,
        posts: []
      };

      this.togglePopup = this.togglePopup.bind(this);
    }

    togglePopup() {
        this.setState({
            showPopup: !this.state.showPopup
        });
    }


   componentDidMount() {

        axios.get('http://localhost:3001/api/events')
          .then(res => {
          let posts = res.data.map(obj => obj);
          this.setState({posts});
          console.log(posts);
        });
    }

  buildRows() {
      return this.state.posts.map( (events, index) =>
          <div key={index} className='result_box' onClick={this.togglePopup}>
            <p>{events.name}</p>
                {events.place && events.place.location &&
                    <p>{events.place.location.city}</p>
                }
            </div>
        );
  }

  render() {

        let rows = this.buildRows();

        return (
            <div>
                {rows}

                {this.state.showPopup &&
                    <Result text='Close Me'closePopup={this.togglePopup.bind(this)}/>
                }                
            </div>
        );
    }
 }

 export default ResultBox;

Collectives™ on Stack Overflow

React, add onClick event on dynamically loaded div element.

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related