No tienes acceso a esta clase

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

Creando el contenedor y el text field

11/24
Recursos

Aportes 14

Preguntas 3

Ordenar por:

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

Con esa prop el icono queda dentro del componente, saludos.

	<TextField label='Search Github User'
					id='outlined-basic'
					variant='outlined'
					width='90%'
					value={inputUser}
					onChange={e => setInputUser(e.target.value)}
					InputProps={{
					startAdornment: (
						<InputAdornment position="start">
							<IconButton onClick={()=> handleClick(setInputUser, inputUser)}>
								<SearchIcon/>
							</IconButton>
						</InputAdornment>
					)}}
				/>

Bajo mi punto de vista queda más limpio si primero definimos los estilos en una variable.

const stackStyles = {
  marginTop: '30px',
  width: '80%',
};

const Searcher = () => {
  return (
    <Stack sx={stackStyles} direction="row">
    </Stack>
  );
};

si usan Material UI con forms, aconsejo usar react Hook Form o Formik, los dos son muy ebusno y tienen bastante mantenimiento y facil de usar. A mi me gusta u poco mas react Hook Form

Mala experiencia de usuario, deberían estandarizar este curso como los demás donde los teachers hacen un excelente zoom a su IDE de desarrollo, trato de pasar clases desde una tablet, y si uso una laptop divido la pantalla en dos para tener mi código paralelamente. 😒

Tranquilo Sam! 😂

Les dejo un Hook para manipular el Input, es muy simple y se puede mejorar:

import { useState } from "react";

export const UseForm = (initialValue) => {
  const [formState, setFormState] = useState(initialValue);

  const onChangeInput = ({ target }) => {
    const { name, value } = target;
    setFormState({
      ...formState,
      [name]: value,
    });
  };

  const resetForm = () => {
    setFormState(initialValue);
  }

  return {
    ...formState,
    formState,
    onChangeInput,
    resetForm,
  };
};

También tengo un FormField que me costó leer solamente la documentación de Material para generarlo(Este componente usa mi hook):

import { FormControl, InputLabel, OutlinedInput, InputAdornment, IconButton } from "@mui/material";
import SearchIcon from '@mui/icons-material/Search';
import { UseForm } from "../hooks";

export const InputSearch = ({label=''}) => {

  const {search, onChangeInput, resetForm} = UseForm({search: ''});

  return (
    <FormControl variant="outlined" sx={{width: '90%', marginTop: '30px'}}>
      <InputLabel size="small" htmlFor="input-search">{label}</InputLabel>
      <OutlinedInput
            id="input-search"
            type="text"
            name="search"
            size="small"
            value={search}
            onChange={onChangeInput}
            endAdornment={
              <InputAdornment position="end">
                <IconButton
                  edge="end"
                >
                  <SearchIcon />
                </IconButton>
              </InputAdornment>
            }
            label={label}
          />
    </FormControl>
  );
};

si usan visual studio code hay una extensión llamada MUI Snippets, que son snippets para Mui V5, fijense que soporte v% porque hay otra para la V4 que aun sigue siendo muy usada,

Creo que es uno de los profesores mas entuciastas 😃

En las últimas versiones de React ya no es necesario hacer el import en cada componente

Shortcuts para crear la base de los archivos en react.
rfc

import React from 'react'

export default function index() {
  return (
    <div>index</div>
  )
}

rfce

import React from 'react'

function index() {
  return (
    <div>index</div>
  )
}

export default index

rfcp || con prototipos

import React from 'react'
import PropTypes from 'prop-types'

function index(props) {
  return (
    <div>index</div>
  )
}

index.propTypes = {}

export default index

a quien le marque error en
<Stack>
<TextField></TextField>
<IconButton></IconButton>
</Stack>;

en mi caso lo soluciones agregando una regla
"react/jsx-filename-extension": [1, { “extensions”: [".js", “.jsx”] }]

Vs code me importaba desde @mui/system. Eso rompía la aplicación. Al cambiar la importación de @mui/material, funcionó!

con el comentario de frodo y sam!!! 5 stars pal curso!