Optimization requests/responses in react/nodejs - node.js

Question

so I have problem with optimizing code, accordingly to DRY rule.
I have 2 requests, 2 responses, 2 GETS, 2 POSTS,
I think I should use loop, which changing the number of iterator, but I have problem with syntax.
Here is my fetch from axios:
componentDidMount() {
fetch('http://localhost:3001/getcounterEbook1')
.then(response => {
console.log(response);
return response.json();
})
.then(count => {
console.log(count);
console.log(count.count);
this.setState({counterebook1: count.count});
}).catch(err => {
});
fetch('http://localhost:3001/getcounterEbook2')
.then(response => {
console.log(response);
return response.json();
})
.then(count => {
console.log(count);
console.log(count.count);
this.setState({counterebook2: count.count});
}).catch(err => {
});
}
Here is handleClick1,2 function:
handleClick1(e) {
console.log("Sending ...")
let data = {
clicked: true,
}
axios.post('http://localhost:3001/counterEbook1', data)
.then( res => {
console.log('ok')
})
.catch( () => {
console.log('Message not sent')
})
}
handleClick2(e) {
console.log("Sending ...")
let data = {
clicked: true,
}
axios.post('http://localhost:3001/counterEbook2', data)
.then( res => {
console.log('ok')
})
.catch( () => {
console.log('Message not sent')
})
}
How can I transform it into loop?

Answer 1

One possibility is to use an Object, call it myObject, and use map like so:
const myObject = {
'counterebook1' : 'http://localhost:3001/getcounterEbook1',
'counterebook2' : 'http://localhost:3001/getcounterEbook2',
};
class Foo extends Component {
....
for (let [key, url] of Object.entries(myObject)) {
fetch(url)
.then(response => {
console.log(response);
return response.json();
})
.then(count => {
console.log(count);
console.log(count.count);
this.setState({key: count.count});
}).catch(err => {
});
}
...
You can consolidate handleClicks by first retrieving the source that triggered the event, and then using that same object
handleClick = (e) => {
console.log("Sending ...")
const url = myObject[e.target.id];
let data = {
clicked: true,
}
axios.post(url, data)
.then( res => {
console.log('ok')
})
.catch( () => {
console.log('Message not sent')
})
}
Note that we're pulling the id prop frome.targetand referencing the key/value pair inmyObject. This means that the element rendered must have theid` prop set to some key in myObject:
For example:
<button onClick={this.handleClick} id={key}>
`Button for ${key}`
</button>
Hope this help!