How to use properties on onClick from on child and parent component? - reactjs

Question

I'm now leaning react and having a lot of fun with, but also having my first issue than I cannot solved by myself.
I would like to use a child component to filter on his parent list. I mean I would like to use a child component to filter a list from his parent.. I hope my code would be more understandable than my explications...
Does anyone can explain how should I use onclick in both class and maybe optimize my code ? Thanks
product.jsx
class Items extends Component {
state = {
count: 0,
carbondioxide: [
{ key: 90, name: "All", value: "All" },
{ key: 91, name: "Still Water", value: "Still Water" },
{ key: 92, name: "Sparkling Water", value: "Sparkling Water" },
],
brands: [
{
key: 0,
name: "Fountain",
category: "Still Water",
},
{
key: 1,
name: "Kitchen",
category: "Sparkling Water",
},
{
key: 2,
name: "Shower",
category: "Still Water",
},
],
filterBrands: [],
};
componentDidMount() {
this.setState({
filterBrands: this.state.brands,
});
}
handleClick = (name) => {
let filterBrands = [];
if (name === "All") {
filterBrands = this.state.brands;
} else {
filterBrands = this.state.brands.filter(
(brands) => brands.category === name
);
}
this.setState({ filterBrands });
};
}
render() {
return (
<div className="ctg-flex">
<GroupButtonFilter
carbondioxide={this.state.carbondioxide}
onClick={this.handleClick.bind(this, name)} //filterBrands onclick
//onClick={() => {
// this.handleClick.bind(this, this.state.carbondioxide.name);
//}}
/>
{this.state.filterBrands.map((id, brands) => (
<Item
key={id.key}
dataImg={id.imageUrl}
dataText={id.name}
dataPrice={id.price}
/>
))}
</div>
);
}
}
export default Items;
and GroupeButtonFilter.jsx
class GroupButtonFilter extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="group-button">
{this.props.carbondioxide.map(({ name, value }) => (
<Button
key={this.props.carbondioxide.key}
value={this.props.carbondioxide.value}
// onClick={this.props.handleClick.bind(this, this.name)} //filterBrands onclick
onClick={this.props.onClicktest} //filterBrands onclick
>
{name}
</Button>
))}
</div>
);
}
}

Answer 1

There are couple of issue on your code.
You are binding your:
onClick={() => {
this.handleClick.bind(this, this.state.carbondioxide.name);
}}
and your handleClick is using arrow function so you can remove bind from this i.e
onClick={() => {
this.handleClick( this.state.carbondioxide.name);
}}
Still its not correct. which is our second point
In GroupButtonFilter you are expecting onClicktest and while passing in GroupButtonFilter you are sending onClick this can reduce to this:
<Button
key={this.props.carbondioxide.key}
value={this.props.carbondioxide.value}
// onClick={this.props.handleClick.bind(this, this.name)} //filterBrands onclick
onClick={this.props.onClicktest} //filterBrands onclick
>
{name}
</Button>
You need to pass the value that button is clicked but in onClick you are sending carbondiooxide name. You need to do this. Inside GroupFilter:
<button
key={this.props.carbondioxide.key}
// onClick={this.props.handleClick.bind(this, this.name)} //filterBrands onclick
onClick={() => this.props.onClicktest(name)} //filterBrands onclick
>
{name}
</button>
Here is complete code:
import React, { Component } from "react";
import "./styles.css";
class GroupButtonFilter extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="group-button">
{this.props.carbondioxide.map(({ name, value }) => (
<button
key={this.props.carbondioxide.key}
// onClick={this.props.handleClick.bind(this, this.name)} //filterBrands onclick
onClick={() => this.props.onClicktest(name)} //filterBrands onclick
>
{name}
</button>
))}
</div>
);
}
}
class Items extends Component {
state = {
count: 0,
carbondioxide: [
{ key: 90, name: "All", value: "All" },
{ key: 91, name: "Still Water", value: "Still Water" },
{ key: 92, name: "Sparkling Water", value: "Sparkling Water" }
],
brands: [
{
key: 0,
name: "Fountain",
category: "Still Water"
},
{
key: 1,
name: "Kitchen",
category: "Sparkling Water"
},
{
key: 2,
name: "Shower",
category: "Still Water"
}
],
filterBrands: []
};
componentDidMount() {
this.setState({
filterBrands: this.state.brands
});
}
handleClick = (name) => {
console.log(name);
let filterBrands = [];
if (name === "All") {
filterBrands = this.state.brands;
} else {
filterBrands = this.state.brands.filter(
(brands) => brands.category === name
);
}
this.setState({ filterBrands });
};
render() {
return (
<div className="ctg-flex">
<GroupButtonFilter
carbondioxide={this.state.carbondioxide}
onClicktest={this.handleClick}
// onClicktest={this.handleClick.bind(
// this.state.carbondioxide.name,
// this.name
// )}
/>
{this.state.filterBrands.map((id, brands) => (
<div key={id.name}>{id.name}</div>
))}
</div>
);
}
}
export default function App() {
return (
<div className="App">
<Items />
</div>
);
}
here is the demo:https://codesandbox.io/s/affectionate-fire-zcqc1?file=/src/App.js:0-2168

Answer 2

write a function in your parent component
handleClick = () => {
/// do your filtering
}
pass this handleClick to your child component
<GroupButtonFilter handleClickInParent ={this.handleClick} />
....
</GroupButtonFilter>
then inside your child component
<Button. onClick={() => this.props.handleClick())}>
</Button>