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

#511 Lo normal es:

Listado => [items, setItems] = useState([])
ElementoDelListado setItems={setItems}

Entonces en ElementoDelListado simplemente haces el setItems(i => [...i, item])

Y en el padre (Listado) puedes hacer lo que quieras pues es donde tienes el hook.

No se si me he explicado, eso en un caso super simple claro, si entre el listado y los elementos hay 20 cosas por medio, o estos elementos tambien afectan a otras cosas en la otra punta de la app, pues ahi si que ya lo mejor es tirar de context o redux

#513 A ver, si solo son 3 niveles, siempre puedes subir el useState al contenedor, y pasar items y setItems al hijo.

Y bueno, recuerda que es React pero sigue siendo JS, si quieres hacer magia negra, siempre puedes poner un listener en el contendor del evento click, y si el target es el esperado hacer lo que tengas que hacer.

Esto es una guarrada y no es de "React way" pero a veces va bien pensar un poco fuera de la "burbuja" en la que nos meten estos "frameworks", que, a mi por lo menos, a veces se me olvida que al final es js de navegador de mierda.

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.

Los binds no se hacen en el constructor?

#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

#533 Yo trabajo con React ya de hace casi 1 a;o, y no he picado ni una clase. Todo se hace funcional y con hooks.

Aprender clases quizas porque te dan un dibujo mas nitido de que es React y que hace, su flujo de vida y tal, pero para trabajar hooks a muerte.