React: how to load different api on different button click - reactjs

Question

I need to load different API urls on different button click:
Here is the API Component:
const companiesUrl = "http://localhost:3005/local-companies-xxx";
class Companies extends Component {
state = {
companyDetails: [],
currentPage: 0
};
get items() {
const {currentPage, companiesDetails} = this.state;
return companiesDetails.slice(currentPage * 3, currentPage * 3 + 3)
}
changeCurrentPage = (i) => {
this.setState({
currentPage : i
})
};
componentDidMount() {
fetch(companiesUrl)
.then(data => data.json())
.then(info => this.setState({companiesDetails: info}))
.catch(error => console.error("error connecting to the api"));
}
[more code... removed because not really necessary to show right now]
Here is the button Component:
class HomeButton extends Component {
render() {
return (
<div className="button" onClick={this.props.passClick}>
<p>{this.props.buttonText}</p>
</div>
)
}
}
export default HomeButton;
And here is the Parent:
class WhomWeHelp extends Component {
state = {
count : 0
};
increment() {
this.setState({
count : this.state.count + 1
})
}
render() {
return (
<section>
<div>
<HomeButton buttonText="xxx" passClick={this.increment} />
<HomeButton buttonText="yyy" passClick={this.increment} />
<HomeButton buttonText="zzzz" passClick={this.increment} />
</div>
<div>
<Companies />
</div>
</section>
)
}
}
export default WhomWeHelp;
As you can see I tried to add an onClick={this.props.passClick} to the button Component and pass the click to the Parent with passClick={this.increment} so that it runs the method
increment() {
this.setState({
count : 0
})
}
Then I wanted to transfer this state to the API Component and load a different API Url per different button.
Button xxx should load the api with an xxx url, button yyy should load the yyy companies, and zzz the zzz companies.
However right now when I click the 3 buttons I get WhomWeHelp.jsx:13 Uncaught TypeError: Cannot read property 'setState' of undefined at increment...
Why I am getting such error? If instead of this.setstate, I put a console log inside increment() {} it works fine.
Also is there a better way to achieve what I am doing avoiding to pass the click from child to parent, and then to pass the state from parent to API child?
Thanks

Answer 1

If when you put a console.log inside increment, it works fine, then I would say your this is the problem and your this is probably undefined. I imagine it is a scope issue.
Try changing your increment function to an arrow function expression like this:
increment = () => {
this.setState((state) => ({
count: state.count + 1
}));
}
For the issue of sending different API requests for different button clicks, you can create another arrow function expression as the binding event and send a flag to determine which API should be hit for each button. For example:
<button onClick={() => this.increment("xxx")}>xxx</button>
Check this reproducible example out where every button does something different to update the state: