Skip to main content
1 de 3
user3821102
  • 183
  • 2
  • 13

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 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í

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