custom method in nested, dynamic child component doesnt fire React - reactjs

Question

I have a component inside my App that processes data from an API and uses it to dynamically create children (which are defined in their own components) based on one of the parameter values from the API call. I am able to get the data through to render the components, but the onClick methods don't work. Here's some code:
The parent Component(within the return):
{this.state.customInputs.map((input, i) => {
if(input.type === 'radio'){
return(
<div className="preference-section" key={i}>
<h2>{input.name}</h2>
<RadioCustomInput
radioActiveState={this.state.radioActiveState}
handleRadioClick={() => this.handleRadioClick()}
options={input.options} />
</div>
)
} else if ( input.type === 'checkbox'){
return(
<div className="preference-section" key={i}>
<h2>{input.name}</h2>
<CheckboxCustomInput
selectedBoxes={this.state.selectedCheckboxes}
handleOnClick={() => this.handleCheckboxClick()}
options={input.options} />
</div>
)
}
})
}
The children components:
class CheckboxCustomInput extends Component {
handleCheckboxOnClick = (e) => {
e.preventDefault();
let checkboxState = e.target.value;
console.log(checkboxState);
return this.props.handleCheckboxClick(checkboxState);
}
render(){
return(
<div className="preference-options">
{this.props.options.map((item, i) => {
return(
<div key={i} className="checkbox-group">
<label
className={this.props.selectedBoxes.includes(item) ? "active-box checkbox-label" : "checkbox-label"}
htmlFor={item}>
<input
className="checkbox-input"
type="checkbox"
value={item}
id={item + '_checkbox'}
onClick={() => this.handleCheckboxOnClick()} />
{item}
</label>
</div>
);
})}
</div>
)
}
}
export default CheckboxCustomInput;
and the other:
class RadioCustomInput extends Component{
handleRadioOnClick = (e) => {
e.preventDefault();
let radioState = e.target.value;
let radioName = e.target.name;
console.log(radioState);
return this.props.handleRadioClick(radioState, radioName);
}
render(){
return(
<div className="radio-group">
{this.props.options.map((item, i) => {
return(
<label
className={this.props.radioActiveState === item ? "active-box radio-label" : "radio-label"}
htmlFor={item + '-card'} key={i}>
<input
className="radio-input"
type="radio"
name={item}
value={item}
id={item + '_radio'}
onClick={() => this.handleRadioOnClick()} />
{item}
</label>
)
})}
</div>
)
}
}
export default RadioCustomInput;

Answer 1

Is the radio working but the checkbox isn't? It looks like you're passing a prop called handleOnClick to your checkbox component, but expecting a handleCheckboxClick prop.

Answer 2

After editing the method prop invocation in the Checkbox component, I was able to pass the event through using the following tweak to my onClick method for each child: onClick={(e) => this.handleCheckboxOnClick(e)}
I also, as suggested by #larz, removed the function return in the parent and passe dthe method by reference only there.
The rest of my issue was CSS, in that the <input/> had a css rule of visibility:hidden and the <label/> element was handling the CSS visual interaction withthe onClick. To fix this, I moved the onClick method to the <label/> and added a native JS method to the chain for the property definitions within the child-local onClick methods, like so:
let radioState = e.target.childNodes[0].value;