CODEWITHSUNDEEP
reactjstypescript
Bill
Bill

Reputation: 5150

React TypeScript: Set initial value for input with useRef

The input field displays the value saved in local storage, but I can't edit the value in the input field and I don't know why.

I don't want to use a placeholder as I want to be able to edit the values.

import React, { useRef, useState } from 'react';

const ProfileComponent: React.FC = () => {
    let email = useRef<HTMLInputElement>(null);

     const saveEmail = () => {
        localStorage.setItem('email', email)
     }

  // tslint:disable-next-line: no-any
  const update = (event: any) => {
    if (event.target.name === 'email') {
      setState({ ...state, email: event.target.value });
    } else if (event.target.name === 'fullName') {
      setState({ ...state, fullName: event.target.value });
    }
  };

    interface StateInterface {
        email: string;
    }
    const [state, setState] = useState<StateInterface>({
        email: localStorage.getItem('email') || '',
    });

    return (
        <input type='text' name='fullName' ref={fullName} onChange={update} value={state.fullName} />
        <input type='text' name='email' ref={email} onChange={update} value={state.email} />
        <button onClick={saveEmail}></button>
    )

}

Upvotes: 3

Views: 14773

Answers (2)

wentjun
wentjun

Reputation: 42526

There are a few issues with the code you have provided

1) You should wrap the DOM elements with React Fragments (<> </>)

2) Instead of setting the type of event as any, you might want to use React.FormEvent<HTMLInputElement>.

3) You should use localStorage.setItem('email', state.email) instead of localStorage.setItem('email', email), since email is a property as part of the state object, thus you will have to reference it in order to access the values.

Here are the full changes below:

interface StateInterface {
  email: string;
  fullName: string;
}

const ProfileComponent: React.FC = () => {
  let email = useRef<HTMLInputElement>(null);
  let fullName = useRef<HTMLInputElement>(null);
  const [state, setState] = useState<StateInterface>({
    email: '[email protected]' || '',
    fullName: 'aa' || '',
  });

  const saveEmail = () => {
    localStorage.setItem('email', state.email)
    console.log(state);
  }

  const update = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.name === 'email') {
      setState({ ...state, email: event.target.value });
    } else if (event.target.name === 'fullName') {
      setState({ ...state, fullName: event.target.value });
    }
  };



  return <>
    <input type='text' name='fullName' ref={fullName} onChange={update} value={state.fullName} />
    <input type='text' name='email' ref={email} onChange={update} value={state.email} />
    <button onClick={saveEmail}>save</button>
  </>

}

Upvotes: 6

carrany
carrany

Reputation: 156

You have to have an onChange in your input

return (
   <input type='text' name='email' ref={email} onChange={e => setState({email: e.target.value})} 
       value= {state.email} />
     <button onClick={saveEmail}></button>
  )

Upvotes: 1

Related Questions