[React] Hilo General - Una librería para atraerlos y atarlos a todos

A mí lo de pasarle callables a "varias generaciones" de hijos me parece una guarrada del copón la verdad, pero parece que es lo normal porque si no se llenaría de contextos a mansalva. El único lado positivo que le encontré es que en js puedes deconstruir los args y puedes sanear algo las props y todo lo que usas dentro del scope del componente, porque si no menuda fiesta.

Por cierto con respecto al tema del OS vas a acabar con un god object que te lleve el estado de las cosas casi fijo (y ese god object va a ser un contexto que con suerte podrás romper en dos o tres objetos).

#515

Si clicar en el escritorio está haciendo que se modifique el estado del listado contenido en el escritorio, de verdad no piensas que ese estado deberia estar en el escritorio? No veo problema ninguno en subir el estado en este caso en concreto.

Me aburría y te he hecho esto, pero tiene cero ventajas respecto a subir el estado a donde tienes que subirlo.

https://codesandbox.io/s/flamboyant-hofstadter-phljt?file=/src/App.js

Para poner en contexto, con cambiar la Key del listado ya harás que se resetee y por lo tanto ahi tienes tu "deselect", pero es un overkill del copón, simplemente me apetecía buscar alternativas que no implicaran mover el estado de sitio. Yo no haría esto de esta manera, y menos aprendiendo.

Solo el tener que escribir el stopPropagation me ha dado bastante grima.

Otra opción sería usar una ref en el listado y detectar clics fuera de él, en el caso de clicar fuera modificas el estado desde el propio listado y a volar.
https://usehooks.com/useOnClickOutside/

Pero desde luego todas me parecen peor opcion que la de subir el estado.

He estado unos meses sin tocar esto y ahora me encuentro queriendo simplemente cambiar el contenido de un container dependiendo de a que se clicke, de si "customers" o "coins", y soy tan inutil que después de estar varias horas intentandolo no soy capaz, acudo al consejo de sabios mediavideros en busca de ayuda

class App extends Component {
  constructor() {
    super();

this.state = {
  customers: [],
  displayCustomers: true,
  displayCoins: false,
};
this.changeToCoins = this.changeToCoins.bind(this);
this.changeToCustomers = this.changeToCustomers.bind(this);
  }

  //logic to change display in container App
  changeToCustomers() {
    if (this.state.displayCoins) {
      this.setState({
        displayCustomers: true,
        displayCoins: false,
      });
    }
  }

  changeToCoins() {
    if (this.state.displayCustomers) {
      this.setState({
        displayCustomers: false,
        displayCoins: true,
      });
    }
  }

  render() {
    return(
      <div className='App'>
        <div className="tab-container">
          <Button content="CUSTOMERS" onClick={this.changeToCustomers}/>
          <Button content="COINS" onClick={this.changeToCoins} />
        </div>
        <CardList customers={this.state.customers} 
          style={{ display: this.state.displayCustomers ? 'block' : 'none'}} />
        <Coins style={{ display: this.state.displayCoins ? 'block' : 'none'}}/>
      </div>
    )
  }
}

Sip, con State, no tengo la cabeza ahora para meterme con hooks

Que estoy haciendo mal? Además de estar seguramente haciéndolo mucho más complicado de lo que es.

#527 Lo del component Button era parte del problema, gracias. No todo el problema though, me seguía sin cambiar el display con el tag style. Con un ternary operator para renderizar uno u otro component se me ha arreglado, pero sigo sin saber porque no funcionaba con el tag style. También me ha ayudado el React Tools, que ni me acordaba de que existía D: shame on me. Gracias por los consejos, os lo dejo aquí por si tenéis curiosidad:

class App extends Component {
  constructor(props) {
    super(props);

this.state = {
  customers: [],
  displayCustomers: true,
  displayCoins: false,
};
  }

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => response.json())
    .then(users => this.setState({ customers: users }));
  }

  //logic to change display in container App
  changeToCustomers = () => {
    if(this.state.displayCoins) {
      this.setState({
        displayCustomers: true,
        displayCoins: false,
      });
    }
  }

  changeToCoins = () => {
    if(this.state.displayCustomers) {
      this.setState({
        displayCustomers: false,
        displayCoins: true,
      });
    }
  }

  render() {
    return(
      <div className='App'>
        <div className="tab-container">
          <button className="tab-button" onClick={this.changeToCustomers}> CUSTOMERS </button>
          <button className="tab-button" onClick={this.changeToCoins}> COINS </button>
        </div>
        {this.state.displayCustomers ? (
          <CardList customers={this.state.customers} />
        ) : (
          <Coins />
        )}
      </div>
    )
  }
}

#531 Mirate videos de Bluuweb en youtube por ejemplo