Duda materia examen react

[MGilB]

Hola, tengo una duda acerca del usar funciones del estilo document.getElementById() dentro de una función de un componente, es correcto. Un caso para usarlo es el de cambiarle la clase a un div para que cambie de color.

[gpvidal]

Hola @MGilB ,

No, no deberías controlar ningún elemento fuera de tu componente (ni dentro) con document.getElementById(). Si el div al que quieres cambiarle la clase no está en tu componente, entonces no es su responsabilidad.

En el caso de que śi esté en el componente, puedes tener una variable que se llame clases y luego referenciarla en tu elemento:

function Example() {
  const componentClasses = "my-class-1 my-class-2";

  return (
    <div class={componentClasses}>
      Hola!
    </div>
  );
}

Y puedes cambiarle el valor a componentClasses para que se actualice.

Saludos,

[MGilB]

Ya perfecto, entonces me surgió otra duda. Estoy haciendo un ejercicio donde tengo tres componentes, restaurant, menú y mesa. La mesa tiene un numero de mesa y su cuenta por pagar. En la parte del menu, se tienen que elegir las opciones que quiere comer cada mesa, se calcula el valor de la cuenta y ese valor al hacer click en "pedir" debe traspasarse a la etiqueta total que tiene la mesa correspondiente. La función de restaurant es contener a estos dos componentes y tiene un boton que suma todas las cuentas de las mesas y calcula la ganancia diaria.

Mi pregunta es como puedo hacer que al apretar el botón pedir que está en menú, se cambie la etiqueta de la mesa. Porque antes usaba document.getElementById y cambiaba la etiqueta a "mano", pero ahora que lo estoy tratando de hacer por medio de variables y useState, pero hago click en pedir y funcionaba. Tengo lo siguiente en los archivos Restaurant.js const [dictTotales, setDictTotales] = useState({}); y al crear la mesa le paso el diccionario de totales como props.

Mesa.js Esta es la etiqueta que tiene el total <span id={"totalMesa" + props.numero}>Total: ${props.totales[props.numero]}</span>

Menu.js Tiene la función clickPedir que se ejecuta al hacer click en el boton Pedir Al componente menu le paso el diccionario de los totales y también el setDictTotales que se crea en restaurant.

<button onClick={clickPedir}>Pedir</button>

[gpvidal]

Si requieres información que está en el padre, entonces tienes dos opciones:

• Se la pasas como prop al hijo, o
• Haces que la acción que recibe el hijo se resuelva en el padre.

Esto fue lo que dijimos en clases: las propiedades bajan y las acciones suben.

En tu caso, si necesitas comunicar dos componentes que estan relacionados quizás deberías tener un componente padre que tenga a esos dos como hijos. No tratarlos componentes separados, ya que se relacionan.

Puedes ver aquí: https://github.com/IIC2513-2020-1/syllabus/blob/master/clases/s1/11%20React/react/examples/todo/Todo.jsx

En este ejemplo como un componente llama a otro.

Saludos,

[MGilB]

Si hago eso mismo, en componente restaurant creo el menu y las mesas. Las mesas las creo en una función dentro de restaurant.js

y el menu lo creo dentro del return de la funcion restaurant:

Estoy usando react con funciones no con objetos por si es parte del problema.

[MGilB]

Profe, para el examen la lógica de la aplicación debe ser tratada si o si dentro de los componentes o se puede hacer un archivo .js como la pregunta 3 de la I2?

[gpvidal]

Estoy usando react con funciones no con objetos por si es parte del problema.

No es problema.

Lo que entiendo es que debes modificar dictClasesMesas[nroMesaAux], para que eso se cargue en la mesa verdad?

Profe, para el examen la lógica de la aplicación debe ser tratada si o si dentro de los componentes o se puede hacer un archivo .js como la pregunta 3 de la I2?

Va a depender de la pregunta

Saludos,

[MGilB]

Claro al apretar pedir, se deberia modificar dictClasesMesas[nroMesaAux] y tambien dictTotales, porque de esa forma cambia de color la mesa y se actualiza el total de la mesa.

[gpvidal]

pero en esa función () => clickPedir() podría ser

() =>  {
  // Otras cosas
  clickPedir()
}

o no?