Skip to content
OverviewSolutions
0
Comments
3
Abraham Esteban Mamani
@abrahamemamani

All comments

  • Charles•430
    @charlesmiller0412Submitted almost 2 years ago

    This was a fun project to jump back in after the holiday break. I used a mobile-first workflow, TypeScript, React.JS using Vite.JS, and SCSS with BEM (where needed as this was very minimal code). Feel free to comment as suggestions are always welcome!

    Interactive Rating Component using TypeScript, React, and SCSS

    1
    Abraham Esteban Mamani•60
    @abrahamemamaniPosted almost 2 years ago

    Hi, Charles! Well done! There are a couple of things you can improve.

    • In the rating.tsx file you are repeating a lot of code. You should declare an array of objects and use the Choice component only once inside a map loop.
    • If you are following the BEM rules, activeChoice should be choice--active.
    • Do not use HTML tags in styles, it is a very bad practice. You should only use them in the generic file.
    • When you are using sass/scss, @media should be declared inside the selector you want to modify.

    Hope you find this helpful. Happy coding!

    Marked as helpful
    0
  • Abraham Esteban Mamani•60
    @abrahamemamaniPosted almost 2 years ago

    Hola, fersrm! La solución no está mal, pero quizá en un caso así podría ser mejor tener todo el contenido en el html y ocultar/mostrar el contenido que corresponda. Y desde el script sólo hacer ese cambio, agregando o quitando una clase.

    Recomendaciones:

    • Intenta escribir el código siempre en el mismo idioma (ideal inglés).
    • Cuando las cosas se vuelven reutilizables no es muy aconsejable trabajar con el atributo id en las etiquetas html.
    • Que el estilo y el comportamiento no estén atados. Si usas la clase .card para estilos, usa .js-card en el script. Y agrega ambas clases en la misma etiqueta html.
    Marked as helpful
    0
  • Abraham Esteban Mamani•60
    @abrahamemamaniPosted almost 2 years ago

    Estas usando un mismo state para todo, y cuando filtras se pierden el resto de valores. Podrías tener un objeto como state, con tres propiedades, y que el valor de cada una sea un array: all, completed, active, e ir actualizando la data que corresponda según la acción del usuario. Y vas a necesitar otro state que se actualice cuando se presione en alguno de los filtros. Para renderear por ejemplo: data[currentProp], donde currentProp va a ser el nombre de alguna de las propiedades del objeto. Y un consejo, mantené el mismo idioma en el código, lo ideal sería hacerlo todo en inglés. Espero haberte ayudado!

    Marked as helpful
    1