javascript - How to get Name on chip or Index of chip? -

1) using following method create multiple chips (material design). in react

<div style={styles.wrapper} classname="container">     {        arrayname.map((row, index)=>(        <chip          style={styles.chip}          key={index}          ontouchtap={handletouchtap}        >           {row.name}        </chip>      ))    }   </div> 

i not able value event handler using "event.target.value" there way value on chips?

arrayname contains name of programming languages angular, react etc. 

2) can change color of chips based on index set?

you can bind index or value directly ontouchtap function, , access value directly.

binding name:

<div style={styles.wrapper} classname="container">    {        arrayname.map((row, index)=>(           <chip              style={styles.chip}              key={index}              ontouchtap={this.handletouchtap.bind(this, row.name)}           >                  {row.name}           </chip>       ))    }   </div>  handletouchtap(name){    console.log('name:', name); } 

binding index:

<div style={styles.wrapper} classname="container">    {        arrayname.map((row, index)=>(           <chip              style={styles.chip}              key={index}              ontouchtap={this.handletouchtap.bind(this, index)}           >              {row.name}           </chip>       ))    } </div>  handletouchtap(index){    console.log('name:', arrayname[index].name); } 

update:

to assign different colors chip, first define color codes in array this:

let colors = ['#color1', '#color2', '#color3', '#color4'....]; 

then use math.floor(math.random() * colors.length); pick random no in range of 0 colors.length, assign color chip this:

 style={{backgroundcolor: colors[math.floor(math.random() * colors.length)]}} 

it work.