0

Given the following piece of code, I am trying to get (console log) the text values in the <li> but I keep getting undefined. I have tried various solutions on SO but to no resolve. 

export class List extends React.Component<{}, IState> {
    constructor(props) {
        super(props);
        this.state = {
            list: ['top', 'middle', 'bottom']
        }
        this.updateReview = this.updateReview.bind(this);
    }
    
    updateReview = (e) => {
        // e.preventDefault()
        console.log(e.target.value);
        // console.log(e.currentTarget.id);
    }

    render() {  
        let { list } = this.state;
        
        return (
           
               <div>
                  {list.map((value, key) => {
                      return (
                          <li  onClick={(x)=>this.updateReview(x)} key={key}>
                                {value}
                          </li>        
                       );
                    })
                 }
              </div>
        );
    }
}
colin_dev256
  • 805
  • 2
  • 16
  • 36
  • 1
    Elements that aren't form fields don't have `value`s. So like table cells (see the linked question's answers), `li` elements have contents, but not `value`s. – T.J. Crowder Nov 27 '18 at 18:40
  • 1
    you set `list` to equal `this.state`, then iterate over state, **NOT** the comments array. – Toby Nov 27 '18 at 18:41
  • BTW, there's no need to bind `updateReview`, since you're callling it from an arrow function in `render`. – T.J. Crowder Nov 27 '18 at 18:41
  • my apologies. ive changed 'comments' to 'list'. I was simply creating a demo for stackoverflow – colin_dev256 Nov 27 '18 at 18:44
  • 1
    In the code shown, just pass `value` to `updateReview` directly: `onClick={() => this.updateReview(value);}`. There's no reason to go through the DOM for it. – T.J. Crowder Nov 27 '18 at 18:46
  • 1
    Replace `onClick={(x)=>this.updateReview(x)}` with `onClick={()=>this.updateReview(value)}`, then in `updateReview` just log `value`, no e.target required. – Toby Nov 27 '18 at 18:46
  • Thank you! Mindset was on "form" values. – colin_dev256 Nov 27 '18 at 18:49

0 Answers0