Olá, eu fiz uma lista de funcionalidades via json, e agora quero criar uma função para quando clicar no botão upvote ele mude o estado e faça uma requisição post para salvar na api, porém não sei como fazer dentro da função .map para que cada botão faça referencia a seu ID.
O código abaixo está funcionando.
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor() {
super();
this.state = {
features: [{
id: 1,
name: 'Test',
count: 1
}]
}
this.upVoteFeature = this.upVoteFeature.bind(this);
}
componentWillMount() {
fetch("http://demo6085176.mockable.io/features")
.then(response => response.json())
.then(json => {
this.setState({
features: json.features,
});
});
this.upVoteFeature = this.upVoteFeature.bind(this);
}
render() {
return (
<div className="App">
<button type="button" onClick={this.upVoteFeature}>upvote</button>
<ul>
{
this.state.features.map(function(feature){
return (
<li key={feature.id}><button type="button">Upvote</button> ({feature.count}) <span>{feature.name}</span></li>
)
})
}
</ul>
</div>
);
}
}
export default App;