OnClick passing undefined - reactjs

Question

I am trying to pass an onClick value, but it passes undefined. Works well if it is not a Card/Paper/Div but I need this "button" to be a Card/paper/div
onClick={() => this.handleChange('bostadstyp')}
onClick={ value='villa', handleChange('bostadstyp')}
render() {
const { bostadstyp } = this.props;
const { auth } = this.props;
const { value, values, handleChange, handleClick } = this.props;
const { backgroundColori } = this.props;
const backgroundColor2 = "#F09515";
const aa = "";
// const imageUrl = window.innerWidth >= "1600px" ? Banner1 : Banner2;
// {if (!auth.uid) return <Redirect to="/loggain" />;}
return (
<div>
<img
className="stars3"
src={Logo}
width="15%"
align="center"
marginBottom="10px"
/>
<img src={Logo} width="15%" align="center" marginBottom="10px" />
<div style={{ backgroundColor: "#F1F1F1", padding: "30px" }}>
<h2
style={{
marginTop: "0px",
marginLeft: "10%",
color: "#F09515",
fontFamily: "Avenir",
fontWeight: "bold"
}}
>
{" "}
Dina Preferenser{" "}
</h2>
</div>
<form
className="background123"
style={{
backgroundColor: "#fdfdfd",
marginTop: "0px",
marginBottom: "0px"
}}
>
<Card
className="row xl12 l12 m12 s12"
style={{
marginLeft: "10%",
marginRight: "10%",
padding: "30px",
backgroundColor: "#fdfdfd"
}}
>
<br />
<div className="col xl6 l6 m12 s12">
<h4
style={{
fontFamily: "Avenir",
fontWeight: "bold",
color: "#F09515"
}}
>
1. Välj din boendestyp
</h4>
<p className="texti" style={{ fontSize: "16px" }}>
Vi behöver den här uppgift då vissa avtal endast gäller för
vissa anläggningstyper.
</p>
</div>
<div className="col xl6 l6 m12 s12">
<Card
className="row cardi xl12 l12 m12 s12"
style={{ width: "270%", backgroundColor: `white` }}
value={"villa"}
onClick={handleChange("bostadstyp")}
>
<div className=" col xl7 l7 m6 s6">
<img src={villa} width="50px" />
</div>
<div className="col xl5 l5 m5 s5">
<h6
className="texti"
style={{ fontSize: 16, textAlign: "right" }}
>
Villa/radhus
</h6>
</div>
</Card>
</div>
</Card>
</form>
</div>
);
}
I expect to 'values.bostadstyp' get the value 'villa'

Answer 1

because you are using function in the class so you must using this.handleChange instead of handleChange
<Card onClick={() => this.handleChange('bostadstyp' )}>
....
</Card>

Answer 2

You need to attach the onClick() listener to a <CardActionsArea/> component which should be nested inside your <Card/> component
Something like
<Card className="row cardi xl12 l12 m12 s12" style={{ width: '270%', backgroundColor: `white` }} value={'villa'} onClick={handleChange('bostadstyp' )} >
<div className=" col xl7 l7 m6 s6">
<img src={villa} width="50px" />
</div>
<div className="col xl5 l5 m5 s5">
<h6 className="texti" style={{ fontSize: 16, textAlign: "right" }}>Villa/radhus</h6>
</div>
</Card>
Also, I suggest looking into the <CardActions/> documentation, the example here shows how its used

Answer 3

Can you try below code in your card element:
<Card className="row cardi xl12 l12 m12 s12"
style={{ width: '270%', backgroundColor: `white` }} value={'villa'}
onClick={(e) => {
e.preventDefault();
this.handleChange('bostadstyp');
}}>
The issue may be due to one of the below reasons:
1. handleChange() not bound with this.
2. To pass values from onClick handler you should use (e) => func('value')
3. The click is happening inside form element, its better to include event.preventDefault()

Answer 4

You need user arrow function:
onClick={() => { this.handleChange('bostadstyp' ) }}
<Card className="row cardi xl12 l12 m12 s12" style={{ width: '270%', backgroundColor: `white` }} value={'villa'} onClick={() => { this.handleChange('bostadstyp' ) }} >
<div className=" col xl7 l7 m6 s6">
<img src={villa} width="50px" />
</div>
<div className="col xl5 l5 m5 s5">
<h6 className="texti" style={{ fontSize: 16, textAlign: "right" }}>Villa/radhus</h6>
</div>
</Card>
UPDATE
Handle Change from parent component:

Answer 5

Make sure your handleChange is bound properly by explicitly binding it or using an arrow function syntax:
this.handleChange = this.handleChange.bind(this) // In component's constructor
// or
handleChange = (value, input) => {
this.setState({
[input]: value
});
};
onClick expects a function to invoke, so you need to wrap your handler into one:
<Card onClick={() => handleChange('villa', 'bostadstyp')}></Card>