How to call specific Object from ObjectArray - reactjs

Question

Trying to get e.target.data from the objects generated. console.log displays they have props with the data value I assigned them with. How are event specific objects called? I need to access the original value and also want to onClick delete them. But so far everything i tried, only returns _this2 TypeError (is not a function), or data i tried to pass with the onClick handler wasn't passed. this.props.plz_zwischenis a simple array of strings and passed from parent Component.
import React, { Component } from 'react';
export default class checkBox extends Component {
constructor(){
super();
this.state = {
checkboxState: false
};
this.toggle = this.toggle.bind(this);
}
toggle(e){
console.log('toggle was triggered');
}
render(){
let miniBox = this.props.plz_zwischen.map(function(a, index){
return <li key={index} data={a}> <label> {a} </label> <input type="checkbox" onClick={(e) => this.toggle()} /></li>;
});
return(
<div>
<ul id="rowlist">
{miniBox}
</ul>
</div>
);
}
}

Answer 1

When you need to access the another prop in map, it is always a good idea to abstract it to a separate component
function ListItem(props) {
return (
<li>
<label> {props.data} </label>
<input type="checkbox" onClick={(e) => props.toggle(props.data)} />
</li>
);
}
class CheckBox extends React.Component {
constructor(props){
super(props);
this.state = {
checkboxState: false
};
this.toggle = this.toggle.bind(this);
}
toggle(a){
console.log(a);
}
render(){
let miniBox = this.props.plz_zwischen.map((a, index)=>{
return <ListItem key={index} data={a} toggle={this.toggle} />;
});
return(
<div>
<ul id="rowlist">
{miniBox}
</ul>
</div>
);
}
}
ReactDOM.render(<CheckBox plz_zwischen={['a','b','c']}/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />
That way you can access the single prop in the child component.
Another way to perform the same thing would be to attach it to the DOM as a custom attribute (since it is a string).
<li data-item={a} key={index} data={a}> <label> {a} </label> <input type="checkbox" onClick={(e) => this.toggle()} /></li>
and then in on click:
event.target.getAttribute('data-item')
Do note that components must begin with capital letters