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

Pizzelio

#355 #356 Gracias por las respuestas, detallo un poco más:

Estoy siguiendo el curso de https://fullstackopen.com/en que pasaron páginas atrás y hay un ejercicio que consiste en buscar mediante un input en un array de países. Dinámicamente se muestra debajo del input el resultado de la búsqueda. Si la búsqueda arroja solo un país como resultado se muestran directamente los datos de ese país pero si hay 10 resultados o menos, solo muestra el nombre del país y un botón al lado que al clickar debería mostrar la info de ese país concreto.

Había pensado que si al hacer click pudiera cambiar el texto del input (controlado por un useState) lo tendría hecho, pero tengo todo en componentes separadas (App, pais, paises y button) y desde la componente button no puedo cambiar el state del input (que está en App)

Lo otro que he intentado es renderizar una componente país con los datos del país que obtengo en el botón, usando ReactDOM.render, pero peta en otra parte no sé bien porqué pero me parece que porque renderiza todo de nuevo pero solo con el nuevo render. Hay forma de añadir al DOM una componente?

Por último lo que he hecho, que funciona pero es cutre de cojones, es manejando el dom con javascript meter los datos del país pero si vas haciendo click a distintos botones van saliendo unos debajo de otros y luego ya no se borran si no actualizas.

El ejercicio concretamente es este, el 2.13: https://fullstackopen.com/en/part2/getting_data_from_server#exercises-2-11-2-14

Alguna idea de cómo hacerlo?

2 respuestas
Axtrix

#361 Te recomiendo que subas el codigo a un https://codesandbox.io/ para poder ver por donde te falla el codigo.

La forma sencilla de hacerlo seria que tu App.jsx tenga el input y le pase a algun componente el valor del input para que este filtre el array de paises.

Si quieres tener los componentes a la misma altura o completamente separados pues vas a tener que tirar de contexto.

1 respuesta
Pizzelio

#362 Vale ahora lo subo.

Lo que me dices de pasar el valor del input y que así se filtre la lista es lo que hago ahora. Hasta ahí bien, lo que no sé hacer es lo de darle a un botón al lado del país y me muestre los datos de ese país. Tengo la componente Country que a partir de los datos de un país muestra su info pero no sé como hacerlo para que funcione al darle al botón xD

Lo del contexto no sé qué es, voy a mirarlo.

Esto tengo: https://codesandbox.io/s/great-borg-4dw4w
He dejado solo que al clickar el botón muestre el nombre del país.

1 respuesta
Axtrix

#363 Sube el codesandbox y le echo un vistazo.

1 respuesta
Martita-

#358
Que libreria de componentes usas en ese proyecto?

1 respuesta
Pizzelio

#364 He editado con el link, puedes verlo con eso no?

1 respuesta
MisKo

#366

En ese link, entiendo que el texto del input vendría por:
const [country, setCountry] = useState("");

Por lo que si quieres cambiarlo, tendrías que pasar la funcion que utilice el setCountry al componente que necesites (supongo que, por lo que veo en el código, sería pasarselo a Countries)

1 respuesta
Pizzelio

#367 Hostia, le paso el setCountry como una referencia no?

2 respuestas
Axtrix

#368 se lo pasas como prop

        <Countries list_country={list_country} country={country} setCountry={setCountry} />
1 1 respuesta
MisKo

#368 Si, con eso te debería de bastar.

Lo del Context que te han comentado, es para ahorrarte pasar referencias cuando tienes muchas capas por el medio.

1 1 respuesta
Axtrix

#365 Ninguna, esta hecho todo a pelo con Tailwind

1 respuesta
Pizzelio

#369 #370 muchas gracias! Qué manera de obcecarme, dándole mil vueltas a como modificar el input desde otra componente sin siquiera pensar en que podía pasarle directamente la función :sweat:

2 respuestas
Axtrix

#372 De nada hombre, te recomiendo que te mires alguna guia de como usar el context de React con Hooks ya que la documentacion de React suele usar classes en vez de hooks

1 1 respuesta
MisKo

#372 No te preocupes, a veces esas cosas pasan ajajaja

1 1 respuesta
Martita-

#371
Muy interesante el Tailwind, gracias.

1
Pizzelio

#373 Ya he visto ya, las clases se pueden sustituir totalmente por los hooks? Porque el curso ese lo hace todo a base de hooks
#374 Ya te digo! jajaja

Por cierto está súper bien el curso aunque si vas un poco flojo de javascript como es mi caso puede costar un poquito más al principio. Hace un repaso rápido al principio de javascript eso sí. Os lo recomiendo a los que, como en mi caso, queráis empezar con React.

JuAn4k4

Hazlo más abstracto, al botón pasale un action genérico y haz:

 <MyButton onButtonClick={value => setCountry(value)} />

Es decir, el componente botón no debería saber de countries. En este caso te vale, igualmente pasarle setCountry pero vamos, no lo llames setCountry en el componente botón

3 1 respuesta
Pizzelio

#377 He hecho esto, supongo que es a lo que te refieres:

En Countries:

<Button onButtonClick={()=>props.setCountry(countries.name)}></Button>

En Button:

return <button onClick={props.onButtonClick}>Show</button>
1 respuesta
Axtrix

#378

Realmente a tu componente button yo no le pasaria logica, que solamente guarde el estilo y tal

const Button = ({ children, ...props} ) => {
  return <button {...props}>{children}</button>;
};

Y ahora donde lo uses ya le puedes pasar toda la logica que quieras

<Button onClick={()=>props.setCountry(countries.name)}> Show </Button>

Obviamente esto depende de tu proyecto y tal, pero a mi me gusta que mis "atomos" sea estupidos y solo tengan el CSS que necesiten

Edit: ojala el prettier en el editor de mediavida jajajaja

1
VonRundstedt

#357 Yo estoy empezando a toquetear cosas con Vue ahora, y aunque sea un n00b con ambos, de momento me parece más sencillo y mejor Vue. Aunque con React si toquetee cosas más complicadas y a lo mejor por eso tengo esa sensación.

#361 Me alegro que le estés sacando partido al curso que puse, yo no llegué a hacerlo, merece la pena?

2 respuestas
Pizzelio

#380 No sé si te lo agradecí pero sino lo hago ahora, gracias!

En mi opinión sí y mucho además. Está totalmente actualizado, muy bien explicado todo paso a paso y todavía no he encontrado ningún error. Con ejercicios al final de cada parte que ayudan a asimilar lo que te van enseñando.

Creo que es de lo mejorcito que he visto de cursos de programación en general. Se nota que está muy trabajado y que lo han hecho personas que saben lo que hacen y como explicarlo.

También es verdad que voy por la parte 2 y son 10 pero espero que no decaiga el nivel.

1 1 respuesta
VonRundstedt

#381 Me alegro! Tendré que echarle un buen vistazo then. Aunque ahora estoy enganchado con Vue.

1
MTX_Anubis

#358 #359 #360 #380 Gracias

Estamos terminando un proyecto bastante tocho en Vue y bueno, no soy experto en front y toda esa parte ha ido a remolque y me queda la espina de si con React hubiera estado mejor.

El caso es que quiero empezar un side project (si es que tengo tiempo) y no sé realmente si tirar por Vue o React. Estoy un poco cansado de ir probando cosas nuevas por un lado pero me gustaría probar React para poder comparar los dos y tomar una decisión definitiva de cara a futuro.

Así que lo hablaré con la almohada este finde xD

1 1 respuesta
MisKo

#383 Si te sirve de algo yo he hecho eso xD He cogido un proyecto que ya existía y lo estoy migrando (y mejorando de paso) a react. De esta manera tendré opinión de ambas tecnologías sobre el mismo trabajo (o parecido).

Aunque parezca una tontería, también depende del equipo que te rodee. Si tienes en el equipo gente que diseña y maqueta (en HTML), no los metería a tocar React (aunque los metería sin problema a Vue, ya que la parte de HTML la pueden tocar libremente).

Ahora bien, si estás tu solo, pues aprovecha y toca React por tener nociones de otra tecnología más y luego poder elegir la que más te guste xD

EDIT:

Por cierto, en base a esto, alguien sabe o usa alguna librería que haga eso? ( Pasar HTML a JSX directamente)

Buscando en google he encontrado esta: https://github.com/reactjs/react-magic pero hace año y pico que no se actualiza xD

1 respuesta
Axtrix

#384 El HTML lo puedes meter tal cual en el return de un componente, no se que tendrias que convertir a JSX especificamente (si lo que quieres es migrar los v-for y los @click y todo eso de Vue pues lo veo complicado)

1 respuesta
MisKo

#385 Me refería a HTML normal, y que react (o un plugin de este) tuviera un "parse" automático: cambiar los class por className, entrecerrar los estilos inline entre {{}}, cerrar los tags que no tienen contenido...

Cositas asi xD

La idea era que una persona que no tenga ni puta idea de react o javascript en general, simplemente toque un archivo HTML externo y, desde react, lo importe y lo utilice para devolver el componente.

De todas formas, todo el tema de propiedades y atributos y tal sería bastante dificil de utilizar despues, asi que supongo que no existe xD

1 respuesta
isvidal

#386 Eso te lo hace WebStorm solo si le pegas un HTML en un fichero que sea JSX

MisKo

Que eso vale para la gente que conozca React xDDD

Pensad en alguien que SOLO haga HTMLs y CSS xD

1 respuesta
isvidal

#388 https://transform.tools/html-to-jsx

1 respuesta
MisKo

#389 Si, justo eso pero que lo haga un plugin de react xDD

import React from "react";
import TemplateHTML from 'mi-template-random.html';

export default function miComponenteMagico = () => {
    return html2jsx(TemplateHTML) ;
}

EDIT: Al final me lo acabaré haciendo yo xD

1 1 respuesta