具有forEach的多个按钮，同时还具有onClick句柄ReactJS

Question

I have a button which has the properties of label and onClick . I also have an array with the value I need to pass to the label properties. Here's the code :

render(){
{tabel_soal.forEach(function (item, index) {
                <RaisedButton
                    label={item}
                    onClick={this.handleTabelSoalClick}
                    primary={true}
                />
            })}
}

With the array in following structure :

tabel_soal ={"buttonName1","buttonName2","buttonName3"}

But I also need to access the onClick properties to run following function :

handleTabelSoalClick = () =>{
    const {push} = this.props
    push(`/tabelsampel/getDetailTabel/`+this.state.tabel_soal)
}

But currently it showed error that this is not defined.

Is there somewhere I did wrong? Any help will be appreciated

Answer 1

To get a button do the following and its onclick or the label you can pass the array

<RaisedButton
label={tabel_soal}
onClick={()=>this.handleTabelSoalClick(tabel_soal)}
primary={true}
 />

and the function will receive the array in param,

handleTabelSoalClick = (tabel_soal) =>{
    ...//what ever you need to do with the array.
}

---

If you wanna get multiple buttons instead, you can use the following code,

render(){
{tabel_soal.map((item, index) =><RaisedButton
                    label={item}
                    onClick={this.handleTabelSoalClick}
                    primary={true}
                />
       )}
}

Answer 2

First of all, you declared the wrong object.

tabel_soal ={"buttonName1","buttonName2","buttonName3"}

It should be like this

 tabel_soal = {
     "buttonName1": { name: "buttonName1", id: 1 },
     "buttonName2": { name: "buttonName2", id: 2 },
     "buttonName3": { name: "buttonName3", id: 3 }
 }

or

 tabel_soal = {
     "buttonName1": "buttonName1",
     "buttonName2": "buttonName2",
     "buttonName3": "buttonName3"
 }

or

declared as an array if you want the only key.

tabel_soal = ["buttonName1","buttonName2","buttonName3"]

If you use the first object type then you can do something like this.

render(){
{tabel_soal.forEach(function (item, index) {
                <RaisedButton
                    label={item}
                    onClick={(e)=>this.handleTabelSoalClick(item)}
                    primary={true}
                />
            })}
}

And in click event handler you can use the value like this.

handleTabelSoalClick = (item) =>{
   .....(`/tabelsampel/getDetailTabel/`+ item.name)
   or
   .....(`/tabelsampel/getDetailTabel/`+ item.id)

}

If you use the second object type then you can do something like this.

render(){
{tabel_soal.forEach(function (name, index) {
                <RaisedButton
                    label={name}
                    onClick={()=>this.handleTabelSoalClick(name)}
                    primary={true}
                />
            })}
}

And in click event handler you can use the value like this.

handleTabelSoalClick = (name) =>{
   .....(`/tabelsampel/getDetailTabel/`+ name)    
}

If you use the third array type then you can do something like this.

render(){
{tabel_soal.forEach(function (name, index) {
                <RaisedButton
                    label={name}
                    onClick={()=>this.handleTabelSoalClick(name,index)}
                    primary={true}
                />
            })}
}

And in click event handler you can use the value like this.

handleTabelSoalClick = (name,index) =>{
   .....(`/tabelsampel/getDetailTabel/`+ name)   
  or 
   .....(`/tabelsampel/getDetailTabel/`+ tabel_soal[index]) 

}