Adding property to element programmatically

user_7130982 0
Viewed 560

Alright, so my question is how I can add a prop to a component programmatically, here is my case, I have this in my render() for example:

              <TextField
                name="password"
                variant="outlined"
                label="Password"
                type="password"
                className={classNames(styles.signUpInputField, styles.override)}
                onChange={this.handleChange}
                onBlur={this.validate}
              ></TextField>

You can see this goes into a validate function, it's a lengthy one so I'll just give you an example and not my actual validate function:

  validateEmail = event => {
    if (event.target.name !== "email") {
         ///Set HelperText and error props here
    } 
  };

What I want to happen is to modify props on my <TextField>, namely setting error= true and helperText= "some error here", How can I do this inside my function?

EDIT: I would need to avoid using states, as there are multiple fields that would need to be assigned exclusively, and multiple states for each is not a clean approach imo.

material-ui reactjs javascript
4 Answers

You have to add using state instead of props.

class YourComponent extends React.Component {
 constructor(){
  state = {
   error: false,
   helperText: '',
 }
}

validateEmail = event => {
    if (event.target.name !== "email") {
         ///Set HelperText and error state here
         this.setState({error: true, helperText: "some error here"})
    }
  };

render (
   ...

   <TextField
      name="password" 
      variant="outlined"
      label="Password"
      type="password"
      className={classNames(styles.signUpInputField, styles.override)}
      onChange={this.handleChange}
      onBlur={this.validate}
      error={this.state.error} // add this new line
   />
   <span>{this.state.helperText}</span>

   ....
);
}
user_54247030

You have to add a state to your component.

For multiple inputs, i implement this this

class MyComponent extends React.Component {
state = {
   error: false,
   helperText: '',
}

validateEmail = event => {
    if (event.target.name !== "email") {
         ///Set HelperText and error props here
         this.setState({error: true, helperText: "some error here"})
    } 
  };

render (
   <TextField
      name="password" 
      variant="outlined"
      label="Password"
      type="password"
      className={classNames(styles.signUpInputField, styles.override)}
      onChange={this.handleChange}
      onBlur={this.validate}
      error={this.state.error}
   />
   {this.state.helperText}
);
}
user_46112140

To add properties programmatically you can use JSX spread syntax {...props}:

class MyComponent extends React.Component {
state = {
   error: false,
   helperText: '',
   additionalProps: {}
}

validateEmail = event => {
    if (event.target.name !== "email") {
         ///Set HelperText and error props here
         this.setState({
         additionalProps: {error: true, helperText: "some error here"}
         })
    } 
  };

render (
   <TextField
      {...this.state.additionalProps}
      name="password" 
      variant="outlined"
      label="Password"
      type="password"
      className={classNames(styles.signUpInputField, styles.override)}
      onChange={this.handleChange}
      onBlur={this.validate}
      error={this.state.error}
   />
   {this.state.helperText}
);
}

user_56644340

You can do that in one state only. Just use the onChange() method to change the state according to the field. If suppose the error pops on the email field, in the onChange() method of the email field check for the error and if error occurs, change the state (error and helpertext) accordingly. And update the field where the error will show, after updating the state.

user_118356820
Related