React pass parameters by names when calling a function

Question

Function handleChange has input parameters with default values.

   handleChange(required = false, test = false, event)

When I call this function, I want to pass some of the input parameters, but not all. For example,

   handleChange(test = true, event)

However this gives an error saying "ReferenceError: test is not defined."

Here is my App.js file:

  import React from 'react';
  import PropTypes from 'prop-types';
  import { withStyles } from '@material-ui/core/styles';
  import TextField from '@material-ui/core/TextField';

  const styles = theme => ({
    container: {
      display: 'flex',
      flexWrap: 'wrap',
    },
    formControl: {
      margin: theme.spacing.unit,
    },
  });

  class MyForm extends React.Component {
    state = {
      name: "",
      name_msg: ""
    };

    handleChange(required = false, test = false, event) {

      if (required === true &&  event.target.value.length === 0) {
        this.setState({ name_msg: "Required" });
      }else{
        this.setState({ name_msg: "" });
      }

      console.log(test);

      this.setState({ name: event.target.value });
    }

    render() {
      return (
          <TextField
            label="Name"
            id="name"
            helperText={this.state.name_msg}
            value={this.state.name}
            onChange={(e) => this.handleChange(test=true,e)}
          />
      );
    }
  }


  export default withStyles(styles)(MyForm);

score 1 · Accepted Answer · answered Oct 10 '18 at 21:47

When you call the function, you just call it normally like any other function. There's nothing special about calling functions with default params set. However, it usually doesn't make sense to have too many default params, especially if you need to often specify one after the first one, since then you end up having to specify the value of the first "optional" param every time anyways.

onChange={(e) => this.handleChange(false, true, e)}

Non-default parameters should always go first by the way, so that you don't need to specify every default param:

handleChange(event, required = false, test = false)

Then you could call any of:

handleChange(event) // required=false, test=false
handleChange(event, true) // required=true, test=false
handleChange(event, true, true) // required=true, test=true
...

Maybe instead you want to create a callback that takes an options object, and set some of the values based on defaults:

handleChange(event, options = {}) {
  const required = options.required ? options.required : false;
  const test = options.test ? options.test : false;

  ...
}

Then you would call it like:

handleChange(event) // required=false, test=false
handleChange(event, { required: true }) // required=true, test=false
handleChange(event, { test: true }) // required=false, test=true
handleChange(event, { required: true, test: true }) // required=true, test=true

I think this is the correct approach but I would advise using [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) on the object to get the default params. ie `handleChange(event, { required = false, test = false} )`. It would save you having to write the ternary logic. — stwilz, Oct 10 '18 at 21:50

score 0 · Answer 2 · answered Oct 10 '18 at 21:49

0

It cannot be done. Only trailing parameters can be left out.

A workaround is you can use undefined to trigger the default params (more details in this SO thread) like so:

handleChange(undefined, true, event)

answered Oct 10 '18 at 21:49

Paras

9,258
31
55

React pass parameters by names when calling a function

2 Answers2