1
resposta

Clicar no botão e adicionar +1 em seu respectivo item dentro do .map

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;
1 resposta

acho que pode ser algo assim:

{
            this.state.features.map(function(feature){
              return (
                <li key={feature.id}><button type="button" onClick={() => this. upVoteFeature(feature.id)}>Upvote</button> ({feature.count}) <span>{feature.name}</span></li>
              )
            })
          }

Você pode passar para o botão uma função que, dentro dela, chama a sua outra função passando o id da feature.