Passing custom props to component with redux-form 7

Question

I am using the following libraries

"@material-ui/core": "^3.0.3",
"react": "^16.5.0",
"redux": "^4.0.0",
"redux-form": "^7.4.2",

How do I pass custom props to my component property of the redux-form <Field /> ?

According to this example from redux-form everything I have below should work, but it is not pulling the multiline={true} or rows={2} props into the <TextField /> component.

I am not sure how it is supposed to work as I am a novice with javascript. Any help would be appreciated.

PostForm.js

import React from 'react'
import { Link, withRouter } from 'react-router-dom';
import { reduxForm, Field } from 'redux-form';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField'


class PostForm extends React.Component {

  renderTextField = ({ input,
                      label, 
                      meta: { error, touched } },
                      ...custom) => {
    return (
        <TextField
          name={label}
          label={label}
          {...input}
          {...custom}
        />
    );
  };


  onSubmit(event) {
    event.preventDefault();

    const { submitPost, history, formValues } = this.props;

    submitPost(formValues.values, history);
  }

  render() {
    <form onSubmit={this.onSubmit.bind(this)}>

      <Field 
        name="title"
        component={this.renderTextField}
        label="Title"
      />
      <Field 
        name="body"
        component={this.renderTextField}
        label="Body"
        multiline={true}
        rows={2}
      />
      <div className={classes.buttonContainer}>
        <Button to="/posts" component={Link} className={classes.button} color='secondary'>
          Cancel
        </Button>
        <Button type='submit' className={classes.button} color='primary'>
          Next
        </Button>
      </div>
    </form>
  }
}

export default reduxForm({
  validate,
  form: 'postForm',
  destroyOnUnmount: false
})(PostForm)

Answer 1

To render multi line fields, you need to pass multiLine={true} (notice the camel casing - this is important). This is based on docs linked from https://github.com/erikras/redux-form-material-ui which seem like old version. According to newer docs, it seems multiline is all lowercase (leaving it here for posterity's sake).

Update

Also, ...custom is outside of the curly braces. Should be

renderTextField = ({ input, label, meta: { error, touched } , ...custom })

A bit about how Field passes props down - it's not enough to cover everything in this answer but I can give a few pointers to help you get started.

<Field ... /> is JSX notation. While JSX makes it easy to read and wirte HTML constructs, [React actually doesn't need JSX][1] . Internally, they all compile to pure JS functions (using React.createElement and other factory functions).

After that, passing ...custom etc. is just rest/spread operators introduced in ES6. They are shortcuts, and you can use React without them as well (meaning you can use just ES5 syntax).