How to set and get TextField value using as props of functional component in react js?

Question

I am totally new to react, I have sign up form which have 5 five input fields.

I created one functional component for TextField

MyTextField.js

function MyTextField(props) {
    return (
        <TextField 
            label={props.label} 
            name={props.name}
            placeholder={props.placeholder} 
            type={props.type}
            onChange={props.handleOnChange}
            value={props.value}
        ></TextField>
    )
}
export default MyTextField

Signup.js

function SignUp() {

    const [value, setValue] = useState('')

    function FunConfirmPassword(event) {
        setValue = event.target.value //this function is calling, if I comment this line
        console.log('FunConfirmPassword called - password value = '+ value)
    }
    return (
        <MyTextField type="text"  label="Firstname" name="firstName" placeholder="Enter Firstname"></MyTextField>
        <MyTextField type="text"  label="Lastname" name="Lastname" placeholder="Enter Lastname"></MyTextField>
        <MyTextField type="text"  label="emailID" name="emailID" placeholder="Enter emailID"></MyTextField>
        <MyTextField type="password"  label="password" name="password" placeholder="Enter password"></MyTextField>

        <MyTextField handleOnChange={FunConfirmPassword}  type="password"  label="confirmpassword" name="confirmpassword" placeholder="Enter confirmpassword"></MyTextField>

    )
}

I am trying to learn how to set the value of TextField and get the value of same textfield.

At the same time, it must be re-usable function

The naming of `FunConfirmPassword` is really bad, in JS, do not use capital first letter if it's not for naming a class, instead use `camelCase`. — Dimitri Kopriwa, Sep 08 '22 at 10:38

score 2 · Answer 1 · answered Sep 08 '22 at 10:23

how to set the value of TextField

In your code, the <TextField> gets its value from a prop:

value={props.value}

So to supply that value, pass it as that prop:

<MyTextField value={value} ...

and get the value of same textfield

That you're already doing here:

<MyTextField handleOnChange={FunConfirmPassword} ...

However, you have a mistake in your handler function here:

setValue = event.target.value

setValue is a function. This should be:

setValue(event.target.value);

Additionally, the console.log statement immediately following it won't print what you expect. React state updates are asynchronous and batched. Either log event.target.value instead, or use a useEffect to respond to the updated value value and log it there. (Or don't log it to the console at all, it's not really necessary.)

yes, you are correct, it works with this `setValue(event.target.value);`. as you said. In the console log, it doesn't print updated value. I will check on how to update using useEffect. thanks — Liam neesan, Sep 08 '22 at 10:41

dns_nx · Accepted Answer · 2022-09-08T10:55:37.187

I've prepared a codepen example for you, where you can see how this works.

https://codepen.io/dns_nx/pen/BaxjdKd

Basically, you set a property to the child component, in which you define the function which is being executed, when called by the child (see property onChange). To set the value in the MyTextField component, you just have to pass the current value of the variable in SignUp to your MyTextField component (see property value):

function SignUp(props) {
   const [firstName, setFirstName] = useState('');      

   ...
   <MyTextField 
       type="text"  
       label="Firstname" 
       name="firstName" 
       placeholder="Enter Firstname"
       value={firstName}
       onChange={(event) => setFirstName(event.target.value}
   />
   ...
}

Then you need to call the function where you need it in your child component (i.e. onChange event) to pass the new value to the parent component (SignUp). The value is set by the property value:

function MyTextField(props) {
   ...
    <TextField 
        ...
        value={props.value}
        onChange={(event) => props.onChange(event)}
        ...
    ></TextField>
}

This is the way to pass values from child components to parent components.

But as larger your application gets, it makes it hard to handle. Therefore I would recommend you to use a state management library like Redux (react-redux).

https://www.npmjs.com/package/react-redux

and use this with the toolkit package

https://www.npmjs.com/package/@reduxjs/toolkit

How will I re-use the useState for remaining `MyTextField` of `LastName, emaillID,password, confirmPassword`. Instead of creating multiple useState for each input field — Liam neesan, Sep 08 '22 at 10:54
That is up to you. You don't have to use separate `useState` variables for each field. You can also define an object variable like `const [signUpValues, setSignUpValues] = useState({ firstName: '', lastName: '', ...});` Then you can pass down the suitable property of the object to the different `MyTextFields` components. Of course, then you need to modify the updating of the property as well. But that is up to you, how you want to handle this. — dns_nx, Sep 08 '22 at 11:01
thanks, it works. I really appreciate your time and effort. I go through this [link](https://www.youtube.com/watch?v=-3lL8oyev9w&list=PLC3y8-rFHvwisvxhZ135pogtX7_Oe3Q3A&index=4) regarding how to use useState with object. — Liam neesan, Sep 08 '22 at 11:28

How to set and get TextField value using as props of functional component in react js?

2 Answers2