CODEWITHSUNDEEP
javascriptreactjstypesmaterial-ui
Tim Launders
Tim Launders

Reputation: 249

react set value to a textfield

everytime the closeEmail is triggered or called I wanted to assign the email.emailAddress as the value of the textfield.

just really new to react , what is the syntax or way to do this ?

Any idea guys ?

#code snippet

<div style={{ display: "block" }}>
                <FormControl sx={{ mt: 2, minWidth: 720 }}>
                  <div
                    style={{
                      display: "flex",
                      justifyContent: "space-between",
                      alignItems: "center",
                    }}
                  >
                    <TextField
                      style={{ width: "95%" }}
                      onChange={emailOnChange}
                      label="Email Address"
                      variant="filled"
                      name={email.emailAddress}
                      defaultValue={email.emailAddress}

                    />
                    <DeleteIcon style={{ color: "red" }} onClick={() => deleteEmail(email, prop.id)} />
                  </div>

#ts

 const closeEmail = (email: IEmail) => {
    const test = email.emailAddress;
    setOpenEmail(false);
    return email.emailAddress;
  }

Upvotes: 0

Views: 166

Answers (3)

Piyush Rajput
Piyush Rajput

Reputation: 86

Firstly, you have to create the state for the TextField to set the value you can achieve with the following changes

import at the top:-

import React,{useState} from 'react';

then create state :-

const[emailValue, setEmailValue] = useState('');

on your function call closeEmail()

const closeEmail = (email: IEmail)=>{
count test = email.emailAddress;
//add
console.log("test",test);
setOpenEmail(false);
return email.emailAddress;
}

Add console to check first you are getting the desired value that you want to set to TextField.

if the value you getting is correct then set the state

  const closeEmail = (email: IEmail) => {
  const test = email.emailAddress;
//add
  console.log("test",test);
//add
  setEmailValue(test);
  setOpenEmail(false);
  return email.emailAddress;
}

Adding this setEmailValue(test) will set state, now you can access by using 'emailValue'

add the following

<TextField
value={emailValue}
style={{ width: "95%" }}
onChange={emailOnChange}
label="Email Address"
variant="filled"
 />

This is how you can set the email.emailAddress value to TextField

Upvotes: 2

MrPatel2021
MrPatel2021

Reputation: 211

you need to pass value of textField like this,

 <TextField
    value={email.emailAddress}
    ...
/>

Upvotes: 0

Beatriz Infante
Beatriz Infante

Reputation: 126

Basically, if you want to control the value of your TextInput you should pass value prop to your TextInput.

<TextField
   style={{ width: "95%" }}
   value={email.emailAddress}
   label="Email Address"
   variant="filled"
   name={email.emailAddress}
   defaultValue={email.emailAddress}
   onChange={emailOnChange}
/>

You can have controlled or uncontrolled components:

  • A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component "controls" it by handling the callback and managing its own state and passing the new values as props to the controlled component. You could also call this a "dumb component". A

  • Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

Upvotes: 0

Related Questions