A√ļn no tienes acceso a esta clase

Crea una cuenta y contin√ļa viendo este curso

Estados semideclarativos con useState

11/19
Recursos

Aportes 10

Preguntas 2

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

Ejemplo de estado imperativo:

<button
   onClick={() =>
       setState({
           ...state,
           loading: true
       })
   }>Comprobar</button>

Ejemplo de estado declarativo:

const onCheck = () => {
   setState({
       ...state,
       loading: true
   })
}
 
...
<button
   onClick={() =>
       onCheck()
   }>Comprobar</button>

jajajajaj yo tambien me quedé pensando como se decia comprobar en Ingles xdd
Lo habia llamado onValidate ya que no recordaba.

Antes de ir a la siguiente clase yo trate de hacer a este componente lo mas declarativo que pude y este fue el resultado final del return

return (
    <div>
      <h2>{renderTitle(confirmation, deleted, name)}</h2>

      {renderContent(
        name,
        confirmation,
        deleted,
        validation,
        loading,
        state,
        setState
      )}
    </div>
  );

Obviamente la función renderContent, así como la de renderTitle son funciones que no agregue, pero estas funciones se encargan de toda la lógica por detrás para solo retornar el bloque de jsx que hay que regresar y la aplicación funciona bien

state.value === SECURITY_CODE ? onConfirm() : onError();

He aprovechado y en vez de poner if-else lo he hecho en una linea.

por aqui dejo el link de platzi English Academy ūü§£ :https://platzi.com/idioma-ingles/ ūü§£

En los botones simplemente puede ponerlo de esta manera

onClick={onCheck}

asi escribe menos codigo y es un poco mas entendible,
si la funcion recibe un parametro se debe hacer asi

onChange={(e) => onWrite(e)}

Me encanta la forma semi-declarativa de usar estados!

El profe dice ‚Äúac√° arriba tenemos m√°s l√≠neas de c√≥digo, pero ac√° abajo nuestro c√≥digo se ve m√°s limpio‚ÄĚ.

Creo que el libro Clean Code se menciona algo como ‚Äú(‚Ķ) no pierdas tiempo escribiendo la documentaci√≥n, escribe c√≥digo que sea entendible a simple vista y luego documentas‚ÄĚ.
Siento que el profe hace hincapié en eso cuando escribe:

if ( condition ) {
	onConfirm();
} else {
	onError();
}

La verdad es que quiza sea la costumbre o nolose, pero me acomodo mas con la primera forma, la Imperativa.

Por otro lado, me gustar√≠a preguntar, ¬ŅCuando usar cualquiera de los dos enfoques.?

Intentando responderme solo y pensando en que dijo Juan que son igual de efectivos, supongno que es dependiendo de tu App como dijo y tambien de el equipo de trabajo con quien estes codeando. Y para concluir, aprender las dos formas.

Código de la clase

const onConfirm = ()=>{
        setState({ 
            ...state,
            error: false, 
            loading: false ,
            confirmed: true,
        });
    }

const onError = ()=>{
        setState({ 
            ...state,
            error: true, 
            loading: false 
        });
    }    	

const onWrite = (event)=>{
        setState({ 
            ...state,
            value: event.target.value,
        });
    }

const onCheck = ()=>{
        setState({ 
            ...state,
            loading: true 
        });
    }

 const onDelete = ()=>{
        setState({
            ...state,
            deleted: true,
        })
    }

 const onReset = ()=>{
        setState({
            ...state,
            confirmed: false,
            deleted: false,
            value:'',
        })
    }
if(!state.deleted && !state.confirmed){
        return (
            <div>
                <h2>Eliminar {name}</h2>
                <p>Por favor, escriba el código de seguridad.</p>
    
                {(state.error && !state.loading ) && (
                    <p>El código es es incorrecto</p>
                )}
    
                {state.loading && (
                    <p>Cargando ...</p>
                )}
    
                <input 
                    type='text' 
                    placeholder='código de seguridad'
                    value={state.value}
                    onChange={onWrite}
                />
                <button
                    onClick={()=>{
                        onCheck();
                    }}
                >Comprobar</button>
            </div>
        );
    }else if(state.confirmed && !state.deleted){
        return(
            <React.Fragment>
                <p>¬ŅSeguro que quieres eliminar UseState?</p>
                <button
                    onClick={()=>{
                        onDelete();
                    }}
                >Si, eliminar</button>
                <button
                    onClick={()=>{
                        onReset();
                    }}
                >No, volver</button>
            </React.Fragment>
        )
    } else {
        return (
            <React.Fragment>
                <p>Eliminado con exito</p>
                <button
                    onClick={()=>{
                        onReset();
                    }}
                >Recuperar UseState</button>
            </React.Fragment>
        )
    }