Question: ReactJs: target.key undefined after method is reached from li rendered by map function

Question

ReactJs: target.key undefined after method is reached from li rendered by map function

Answers 1
Added at 2017-01-03 01:01
Tags
Question

I'm currently trying to coding a react app that would do the following: - Create a list of questions from an array using a map function. - Making each list element clickable using a onClick prop - The linked onClick method changes the state in another file with my 'qsChange' prop.

I had a hard time making my list clickable and finally managed following this question: React: trying to add an onClick to a li tag but the click handler function is undefined

However, now I cannot make it so that my variable 'choice' returns a defined value. I would want var choice to be equal to "A ?", "B ?" or "C ?" depending on which

  • I click.

    Here's my code:

    var questions = ["A ?", "B ?", "C ?"];
    var Questions = React.createClass({
        handleClick: function() {
          var visibility;
          if(this.props.visibility) {
              document.getElementById('second').style.display = 'none';
              visibility = false;
              this.props.onChange(visibility);
          } else {
              document.getElementById('second').style.display = 'block';
              visibility = true;
              this.props.onChange(visibility);
          }
        },
    
    /* Here is where my problem lies */
        onItemClick: function(e){
            var choice = e.target.key;
            this.props.qsChange(choice);
            alert(choice);
        },
    
        render: function() {
            return (
                <div className="bigqs">
                    <div id="first" className="small" style={firstStyle}>
                         <h1>Question :</h1>
                             <button style={btnStyle} onClick={this.handleClick}>
                                    <img id="arrow" src="../../img/arrow.png" />
                             </button>
                         <h3 id="selectedQuestion">{this.props.selected}</h3>
                    </div>
                    <div id="second" className="small" style={{display: 'none'}}>
                       <h4>
                          <ul>
                               {questions.map(function(qs, i) {return <li key={qs[i]} onClick={this.onItemClick}>{qs}</li>;}, this)}
                          </ul>
                       </h4>
                    </div>
                </div>
            );
         }
    });
    

    I am still a newbie, so please be indulgent ;-) I hope I was clear enough.

    Ps: I have also tried this guide but it didn't work for me: http://derpturkey.com/react-pass-value-with-onclick/

  • Answers
    nr: #1 dodano: 2017-01-03 01:01

    Instead of grabbing the question from target, you can pass question through to your handler. Also, since inside map qs is a string, qs[i] will be getting the character in the string from that index. You just need to make sure your key is unique.

    onItemClick: function(choice) {
      this.props.qsChange(choice)
      alert(choice)
    },
    
    render() {
      return (
       <div>
         ...
         {questions.map(qs =>
           <li key={qs} onClick={() => this.onItemClick(qs)}>{qs}</li>
         )}
         ...
       </div>
      )
    }
    

    In fact, your intermediate function isn't doing much, you can just call your props function inside render:

    render() {
      return (
       <div>
         ...
         {questions.map(qs =>
           <li key={qs} onClick={() => this.props.qsChange(qs)}>{qs}</li>
         )}
         ...
       </div>
      )
    }
    
    Source Show
    ◀ Wstecz