How to append string to API url onclick in React js - reactjs

Question

I'd like to append a string to all url when I click on a button, how to do this ?
Here is the code
App.js
import React, { Component } from "react";
import Button from './Button';
let API = 'https://someurl.com/';
class App extends Component {
constructor(props) {
super(props);
this.state = {
results: []
};
this.updateUrl = this.updateUrl.bind(this);
}
componentWillMount = () => {
this.fetchData();
}
fetchData = async () => {
const response = await fetch(API);
const json = await response.json();
this.setState({
results: json.results
});
};
updateButton = (event) => {
this.setState({
API.concat('?format=fzjeozfij')
});
}
render() {
return (
<div>
<Button data={this.state} />
</div>
);
}
}
export default App;
Button.js
import React, { Component } from 'react';
class Button extends Component {
render() {
const updateButton = this.props.data;
return (
<button type="button" onClick={updateButton}>Button</button>
)
}
}
export default Button;
My goal is to get the url from const API to https://someurl.com/?format=zegizhgz
I think I have to modify the fetchData function to concat some string to the url but I'm not sure how to do it

Answer 1

updateButton = () => {
const nApi = `${this.state.api}?format=wookiee`;
this.setState({ api: nApi });
this.fetchData(nApi);
}
render() {
return (
<div>
<Button onClick={this.updateButton}/>
</div>
);
}
fetchData = async (api) => {
const response = await fetch(api);
const json = await response.json();
this.setState({
results: json.results
});
};
Button.jsx
import React, { Component } from 'react';
class Button extends Component {
render() {
const {onClick} = this.props;
return (
<button type="button" onClick={onClick}>Button</button>
)
}
}