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 11

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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

Tranquilo Sam! 馃槀

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. 馃槖

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鈥漖 }]

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,

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>
  );
};

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

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