Hola estoy haciendo un proyecto en React + apollographql + mongoDB y quiero programar la edicion directa de los campos de la tabla. Pero cuando doy click en el campo que quiero editar se me dispara la accion en la columna completa. A continuacion pongo las imagenes y el codigo que tengo. 

[![introducir la descripción de la imagen aquí][1]][1] 


[![introducir la descripción de la imagen aquí][2]][2]


  [1]: https://i.sstatic.net/qGiCA.png
  [2]: https://i.sstatic.net/Sqjmx.png

    import React, {Component} from 'react';

    import gql from 'graphql-tag';
    import { Query, Mutation } from 'react-apollo';

    const GET_CURRENT_USER = gql`
    {
      products {
        _id
        name
        description 
         price 
        }
       }
        `;
        const DELETE_CURRENT_PRODUCT = gql`
        mutation Deleteproduct($_id: String){
        deleteproduct(_id: $_id) {
        _id
        name
        description 
        price 
          }
         }
        `;
        const UPDATE_CURRENT_PRODUCT = gql`
         mutation Updateproduct($_id: String, $name: String, $description: 
         String, 
        $price: String, $image: String){
        updateproduct(_id: $_id, name: $name, description: $description, price: 
         $price, image: $image) {
        _id
        name
        description 
        price 
         }
        }
       `;

       class Profile extends Component {
        constructor(props) {
       super(props);
        this.state = {
         campoVisible: false,
         inputVisible: true
         }
         }
   
        handleVisibility = (e) =>{
       console.log(e.target);
       this.setState({campoVisible: !this.state.campoVisible});
       this.setState({inputVisible: !this.state.inputVisible});
        }
 
       render(){
    
       return(
      <Query query={GET_CURRENT_USER} pollInterval={500}>
        {({ loading, error, data,startPolling, stopPolling }) => {
            //const { products, product } = data;
            //const { books } = data;
            //console.log( books )
            if (loading) return "Loading...";
            if (error) return `Error!: ${error}`;
          return (
            <div>
                <h2>Listado de productos en la base de datos MongoDB</h2>
                <table id="customers">
                  <thead>
                    <tr>
                        <th >Nombre</th>
                        <th>Descripción</th>
                        <th>Precio en USD</th>
                        <th>Acción </th>
                    </tr>
                  </thead>
                  <tbody>
                      
                      {data.products.map((product, key) =>{
                        return  <tr key={key} >
                                      <td onClick={this.handleVisibility}>
                                        <p hidden={this.state.campoVisible} 
        value='test'>{product.name}</p>
                                        <p hidden={this.state.inputVisible}> 
       <input value={product.name} /></p>
                                      </td> 
                                      <td>{product.description}</td>
                                      <td>{ "$" + product.price}</td>
                                      <Mutation  mutation= 
       {DELETE_CURRENT_PRODUCT}>
                                        {(deleteproduct, {data}) => (
                                          <td><button onClick={() => 
       deleteproduct({variables: {_id: product._id }})}>Eliminar</button></td>
                                        )}
                                      </Mutation>   
                                      
                                </tr>
                      })}
                      
                  </tbody>
                </table>
            </div>
          );
        }}
         </Query>
        );    
      }
      }
    
     export default Profile;