No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Mostrando la localización del usuario

20/24
Recursos

Aportes 14

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

🧩 Importaciones de los iconos

import LocationOnIcon from "@mui/icons-material/LocationOn";
import TwitterIcon from '@mui/icons-material/Twitter';
import LanguageIcon from "@mui/icons-material/Language";
import BusinessIcon from '@mui/icons-material/Business';

Para verificar si existe un Blog, el profe hace blog !== null pero en la respuesta de la API, si no existe el blog devuelve un string vacio.
Entonces deberiamos hacer esta validacion:
{blog !== “”
? <Typography>{blog}</Typography>
: <Typography>Not Available</Typography>
}

Mi solución para la arroba fue utilizar los template literals de JS

<Typography>
	{twitter_username ? `@${twitter_username}` : "Not Avaible"}
</Typography>

Así se pueden ahorrar el ternario

<Grid item xs={6}>
        <Stack>
          <TwitterIcon />
          <Typography>{twitter_username || 'No indica'}</Typography>
        </Stack>
      </Grid>

@Not Available
😅¿Qué les parece?

<Typography>
	@{twitter_username ?? 'Not Available'}
</Typography>

Dejo el cod

import React from "react";
import { Grid, Stack, Typography } from "@mui/material";
import LocationOnIcon from '@mui/icons-material/LocationOn';
import TwitterIcon from '@mui/icons-material/Twitter';
import LanguageIcon from '@mui/icons-material/Language';
import BusinessIcon from '@mui/icons-material/Business';

const LocationInformation = (props) => {
  const { userState } = props
  const {
    location,
    twitter_username,
    blog,
    company
  } = userState;
  return(
    <Grid container>
      <Grid item xs={6}>
        <Stack>
          <LocationOnIcon/>
          <Typography>{location}</Typography>
        </Stack>
      </Grid>
      <Grid item xs={6}>
        <Stack>
          <TwitterIcon/>
          {twitter_username !== null
            ? <Typography>{twitter_username}</Typography>
            : <Typography>Not Available</Typography>
          }
        </Stack>
      </Grid>
      <Grid item xs={6}>
        <Stack>
          <LanguageIcon/>
          {blog !== null
            ? <Typography>{blog}</Typography>
            : <Typography>Not Available</Typography>
          }
        </Stack>
      </Grid>
      <Grid item xs={6}>
        <Stack>
          <BusinessIcon />
          {company !== null
            ? <Typography>{company}</Typography>
            : <Typography>Not Available</Typography>
          }
        </Stack>
      </Grid>
    </Grid>
  )
}

export default LocationInformation;

Mi solución al reto:

<Typography>{twitter_username ? `@${twitter_username}` :'Not Available'}</Typography>
  <Grid item xs={6}>
              <Stack>
                  <Twitter />
                  <Typography>{twitter_username ? `@${twitter_username}` :'Not Available'}</Typography>
              </Stack>
          </Grid>
          <Grid item xs={6}>
              <Stack>
                  <Language />
                  <Typography>{blog  ?? 'Not Available'}</Typography>
              </Stack>
          </Grid>

Si lo quieren trabajar con Typescript, se deben declarar 2 interfaces.

interface User {
  location: string,
  twitter_username: string,
  blog: string,
  company: string
}
interface Props {
  userState: User
}
const LocationInformation = ({ userState }: Props) => {
  const { location, twitter_username, blog, company } = userState;
  return (
    <Grid container>
      <Grid item xs={6}>
        <Stack>
          <LocationOnIcon />
          {location !== null
            ? <Typography variant="body1" color="initial">{location}</Typography>
            : <Typography variant="body1" color="initial">Not Available</Typography>
          }
        </Stack>
      </Grid>
)
}

Facil, colocar el @ antes del {twitter_username}, quedando asi:
? <Typography>@{twitter_username}</Typography>

Para no tener tantos Grid también puedes hacer:

<Grid item xs={6}>
            <Stack direction="row">
                <LocationOnIcon />
                <Typography>{location}</Typography>

            </Stack>
            <Stack direction="row">
                <TwitterIcon />
                <Typography>{twitter_username ? `@${twitter_username}` : "Not Avaible"}</Typography>

            </Stack>
        </Grid>

Pero esto no tiene nada de re-usabilidad. Estamos copiando y pegando el mismo bloque una y otra vez. Creo que sería mejor crear un componente que se encargue de evaluar la prop que le enviemos, y solo importar y usar el componente.

Agregar @ a la izquierda de la variale de username.

<Typography>@{twitter_username}</Typography>

la solución al reto la hice de esta forma

<Stack>
    <TwitterIcon />
    {
        twitter_username !== null 
            ? <Typography>@{twitter_username}</Typography>
            : <Typography>Not Available</Typography>
    }
</Stack>

adicionalmente, añadí pequeños cambios, utilice el operador ternario con location

<Stack>
    <LocationOnIcon />
    {
        location !== null 
            ? <Typography>{location}</Typography>
            : <Typography>Not Available</Typography>
    }        
</Stack>

blog lo compare con un string vacio y no con null, de esta manera puede funcionar correctamente el operador ternario ya que ese es el tipo de dato que estamos esperando en caso de que el usuario no tenga habilitada esta opción

<Stack>
    <LanguageIcon />
    {
        blog !== '' 
            ? <Typography>{blog}</Typography>
            : <Typography>Not Available</Typography>
    }
</Stack>

así quedaría el código completo

import { Grid, Stack, Typography } from "@mui/material";
import React from "react";
import LocationOnIcon from "@mui/icons-material/LocationOn";
import TwitterIcon from '@mui/icons-material/Twitter';
import LanguageIcon from "@mui/icons-material/Language";
import BusinessIcon from '@mui/icons-material/Business';

const LocationInformation = (props)=> {
    const { userState } = props 
    const { location, twitter_username, blog, company } = userState 

    return (
        <>
            <Grid container >
                <Grid item xs={6}>
                    <Stack>
                        <LocationOnIcon />
                        {
                            location !== null 
                                ? <Typography>{location}</Typography>
                                : <Typography>Not Available</Typography>
                        }        
                    </Stack>
                </Grid>

                <Grid item xs={6}>
                    <Stack>
                        <TwitterIcon />
                        {
                            twitter_username !== null 
                                ? <Typography>@{twitter_username}</Typography>
                                : <Typography>Not Available</Typography>
                        }
                    </Stack>
                </Grid>

                <Grid item xs={6}>
                    <Stack>
                        <LanguageIcon />
                        {
                            blog !== '' 
                                ? <Typography>{blog}</Typography>
                                : <Typography>Not Available</Typography>
                        }
                    </Stack>
                </Grid>

                <Grid item xs={6} >
                    <Stack>
                        <BusinessIcon />
                        {
                            company !== null 
                                ? <Typography>{company}</Typography>
                                : <Typography>Not Available</Typography>
                        }
                    </Stack>
                </Grid>
            </Grid>
        </>
    )
}

export default LocationInformation