Skip to main content
2 de 3
se eliminaron 264 caracteres en el cuerpo
German Alzate
  • 3k
  • 1
  • 16
  • 26

Cambiar estilo de una celda de una tabla dinámica en React.js

Hola estoy haciendo un proyecto en React + apolloGraphQl + mongoDB y quiero programar la edición directa de los campos de la tabla. Pero cuando doy click en el campo que quiero editar se me dispara la acción en la columna completa. A continuación pongo las imágenes y el código que tengo.

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

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;
user3821102
  • 183
  • 2
  • 13