How to display selected Listbox value in ReactJS from state

Question

What I want to do is select an item from the ListBox and display it in the same WebPage. The ListBox renders correctly, but when I try to Output the selected value, it shows target undefined. Refer comments in code.

I tried using event.target.value to retrieve the value selected which has always worked for me so far, but it says event.target is undefined and the value is inaccessible.

Note : I tried using Grommet for this app for styling, "List", "Box", "ListItem" are all grommet components.

Any help will be highly appreciated.

import React, {Component} from "react";
import Box from "grommet/components/Box";
import List from "grommet/components/List";
import ListItem from "grommet/components/ListItem";

const lb = [];

class ListBox extends Component{
    state = {
    products: [                //Array of Products
            "Product1",
            "Product2",
            "Product3"
    ],           
    selected: null             //State Variable where selected item will be stored  
};

contents () {
    for (let i = 0; i < this.state.products.length; ++i){
        lb[i] = 
            <ListItem justify = "between" key = {i}>
            <span>
                {this.state.products[i]}
            </span>
            </ListItem>            
    }
}

itemSelected (event) {
    console.log(event.target);  //SHOWS TARGET UNDEFINED in Console Window
    let temp = {
        selected: event.target
    }
    this.setState(temp);
}

render () {
    this.contents();
    return (
        <Box>
            <List 
                selectable={true} 
                onSelect = {     //The function call on selecting an item
                    (event) => {
                        this.itemSelected(event);
                    }
                } >
                {lb}
            </List>
            <p>Selected Product : {this.state.selected}</p>
        </Box>
    );
}
}

export default ListBox;

define your `state` inside the `constructor` using `this` keyword — izengod, Feb 22 '18 at 05:24
I think that is not required with React 16. I know for a fact that this new syntax works. — animesharma, Feb 22 '18 at 05:28
may I see how do you use the `onSelect` prop in `List` componenet? I'm not much aware about the `grommet` — izengod, Feb 22 '18 at 05:43
You can view the documentation at : [Grommet List](http://grommet.io/docs/list) as indicated in the accepted answer. — animesharma, Feb 22 '18 at 06:06

score 0 · Accepted Answer · answered Feb 22 '18 at 05:42

0

grommet give you selected item index not event. please check official document.

http://grommet.io/docs/list

itemSelected (index) {
    console.log(index);  
    let temp = {
        selected: this.state.products[index]
    }
    this.setState(temp);
}

answered Feb 22 '18 at 05:42

Javed Shaikh

663
7
16

Thanks! this works perfectly. Sorry I'm new to Grommet. – animesharma Feb 22 '18 at 05:48

How to display selected Listbox value in ReactJS from state

1 Answers1