1

Estoy teniendo un problema de refactorización en React que no se me ocurre como resolver. Lo que tengo pensado es reutilizar un handler que modifique el estado del componente padre <App/> que recibe desde el componente hijo <Toggle/> (que básicamente lo que contiene es un input type="checkbox")

Según esta fuente lo que debería hacer para mandar valores desde un componente hijo a un padre es mandar un callback (o handler) como prop al componente <Toggle/> y ahí tratarlo. Este es el código que me quedo:

class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      showListas: false,
      showForms: false
    }
    this.handleShowForms = this.handleShowForms.bind(this)
    this.handleShowListas = this.handleShowListas.bind(this)
  }

  /* **refactorizar codigo para reutlilizar una misma función** */

  handleShowListas(showListas) {
    this.setState({showListas})
  }
  handleShowForms(showForms) {
    this.setState({showForms})
  }
  render() {
    return (
      <div className="main">
        <Toggle name="Listas" active={this.state.showListas} handleShow={this.handleShowListas} />
        <Listas show={this.state.showListas}/>
        <Toggle name="Forms" active={this.state.showForms} handleShow={this.handleShowForms} />
        <Forms show={this.state.showForms}/>
      </div>
    )
  }
}

class Toggle extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      active: this.props.active
    }
    // Este enlace es necesario para hacer que `this` funcione en el callback
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({active: !this.state.active})
    // mando el nuevo estado al padre
    this.props.handleShow(!this.state.active);
  }
  render() {
    return (
      <div id="toggle">
        <label className="switch">
          <input type="checkbox" checked={this.state.active} onChange={this.handleClick} />
          <span className="slider round"></span>
        </label>
        <p>Mostrar {this.props.name}? ({this.state.active ? 'Si' : 'No'})</p>
      </div>
    )
  }
}

Como ven tengo creado dos handlers que hacen lo mismo pero con distintos estados, y mi idea es crear más componentes de este estilo, por lo que seria necesario reutilizar esa función.

Resultado visual:

Duda en la refactorización (React)

Nota: Investigando un poco más encontré esta documentación de MDN sobre las propiedades computadas, estoy seguro que va por este lado pero realmente no se como implementarlo.

1
  • Nico, actualice la respuesta en relación a tu último comentario, si consideras que la respuesta fue de utilidad, vota por ella y acéptala, saludos.
    – g.4
    el 3 feb. 2021 a las 17:33

1 respuesta 1

0

Se puede configurar un Componente controlado para el checkbox, mapeando el nombre de cada input con propiedades del objeto state.

Luego, se hace uso de estos nombres como propiedad computada ES6, al momento de actualizar el estado del Parent Component, posibilitando el uso de una función genérica handleShow.

Aquí, un ejemplo basado en el código original, con las modificaciones necesarias y comentarios en las mismas:

class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      showListas: false,
      showForms: false
    }
    this.handleShow = this.handleShow.bind(this);
  }

  /* **refactorizar codigo para reutlilizar una misma función** */
  handleShow(name, value){
    //uso name como propiedad computada ES6
    //propago el objeto state con un nuevo valor
    //para la propiedad computada [name]
    //state immutability: copy
    const copy = {...this.state, [name]:value}
    this.setState(copy);
  }
  render() {
    return (
      <div>
        {/*Nótese el mapeo de la propiedad name, hace match con el state*/}
        <Toggle name="showListas" active={this.state.showListas} handleShow={this.handleShow} />
        <Listas show={this.state.showListas}/>
        <Toggle name="showForms" active={this.state.showForms} handleShow={this.handleShow} />
        <Forms show={this.state.showForms}/>
      </div>
    )
  }
}

class Toggle extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      active: this.props.active
    }
    // Este enlace es necesario para hacer que `this` funcione en el callback
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    //el nombre esta mapeado en el state del parent
    const name = this.props.name;
    this.setState({active: !this.state.active})
    //mando el nombre del input a modificar
    //y el nuevo estado al handler del padre
    this.props.handleShow(name, !this.state.active);
  }
  render() {
    return (
      <div>
          <label>
            <input type="checkbox" checked={this.state.active} onChange={this.handleClick} />
            <p>Mostrar {this.props.name}? ({this.state.active ? 'Si' : 'No'})</p>
          </label>
      </div>
    )
  }
}

function Listas(props) {
    return (props.show) ? <h3>En Listas</h3>: null;
}

function Forms(props){
    return (props.show) ? <h3>En Forms</h3> : null;
}


ReactDOM.render(<App/>, document.getElementById('root'))
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>

<div id="root"></div>

Actualización

A que te referis con "state immutability" y la variable copy? Por que el spread operator en esa variable copy?

Inmmutable data es un tema relacionado a mejores prácticas, se trata de no mutar el objeto state directamente, si no a travéz de copias del mismo.

Consideremos el siguiente ejemplo:

const state = {
  showList: false,
  shoeForm: false
}
//state immutability: copy
const copy = {...state, showList:true};
console.log("el objeto state no muta: ", state);
//spread operator regresa una copia con la modificacion de showList
console.log("copia mutada del objeto state: ", copy);
//se trabaja con la copia
//this.setState(copy)

Espero que esta respuesta sea de ayuda.

2
  • Ok, era justo lo que estaba buscando, gracias pero ahora me surgieron otras preguntas.A que te referis con "state inmutability" y la variable copy? Por que el spread operator en esa variable copy? En cuanto a propiedad computada [name]:value lo que pude hacer para no pasarla como "showCOMPONENTE" fue ['show'+name]:value, que era a lo que queria llegar pero no sabia como implementarlo. Gracias igualmente
    – 00frank
    el 3 feb. 2021 a las 16:37
  • @NicoHermes, Immutable data Es un tema del que he estado leyendo recientemente y es una buena práctica, te dejo este link; Se trata de evitar mutaciones directas en el state data, esto se hace creando copias del mismo las cuales, son enviadas a setState; en el ejemplo spread operator const copy = {...this.state, [name]:value} nos regresa una copia mutada del objeto state, la cual asignamos a la variable copy, y esta copia es con la cual actualizamos el estado.
    – g.4
    el 3 feb. 2021 a las 16:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.