react input chnage default value using hooks

Question

const [firstName, setFirstName] = useState(null)

useEffect(() => {
    if (props.profile && props.profile.profile) {
        setFirstName(props.profile.first_name)
    }
})


return (
    <div>
        <CustomTextField
                    className={classes.InputField}
                    variant="outlined"
                    name="firstname"
                    type="text"
                    fullWidth
                    placeholder=""
                    onChange={e => setFirstName(e.target.value)}
                    value={firstName}
                />
    </div>
)

Here i am using react hooks state

Here, I am trying to change the default value which coming from api. But, I am not able to change on onChange method .

Please take a look how can i handle this .

Or any other way to handle this problem

Thanks

Majid M. · Answer 1 · 2021-08-07T10:44:05.733

0

You don't need to use onChange or useEffect for setting the default value, just set the value with the props given in your CustomTextField and useState:

import { Input } from "@material-ui/core";
import "./styles.css";
import * as React from "react";

export function CustomTextField(props) {
  const [firstName, setFirstName] = React.useState(props.firstName);
  return (
    <Input
      onChange={(e) => {
        setFirstName(e.target.value);
      }}
      variant="outlined"
      name="firstname"
      type="text"
      value={firstName}
    />
  );
}

export default function App() {
  return <CustomTextField firstName="Kiran" />;
}

edited Aug 07 '21 at 10:44

answered Aug 07 '21 at 05:18

Majid M.

4,467
1
11
29

Both value and defaultValue will be there in input ? – Kiran S youtube channel Aug 07 '21 at 05:20
Are you using `material-ui`? – Majid M. Aug 07 '21 at 05:21
Ok, I will do it for you in 2 minutes. Let me share an example in codesandbox. – Majid M. Aug 07 '21 at 05:26
@KiranSyoutubechannel Updated. Please see the link. – Majid M. Aug 07 '21 at 05:29
@MajidMohammadi I think it is better to use ```value``` instead of ```defaultValue``` – Ayush Gupta Aug 07 '21 at 05:33
@AyushGupta OP want to set defaultValue of the input. If we set the value with `props.firstName`, input doesn't change when we change the value of the input. – Majid M. Aug 07 '21 at 05:36
1

@MajidMohammadi ```defaultValue``` is used in *uncontrolled components*. Change ```defaultValue={firstName}``` to ```value={firstName}``` in your sandbox and notice that it does change. For more information, refer here: https://stackoverflow.com/questions/56000466/what-is-the-real-difference-between-value-and-defaultvalue-in-react-js – Ayush Gupta Aug 07 '21 at 05:39
@AyushGupta Thank you for your attention. I updated my answer. That's true. – Majid M. Aug 07 '21 at 05:44
1

@MajidMohammadi Glad to help – Ayush Gupta Aug 07 '21 at 05:48

react input chnage default value using hooks

1 Answers1