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, { 鈥渆xtensions鈥: [".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!