Как сделать название формы (redux-form) используя props?

Question

[Сергей Сунцев]

На странице генерируется много динамических форм.
пример формы:

import React, {Component} from 'react'
import Button from '@material-ui/core/Button'
import WysiwygTextarea from 'shared/ui/WysiwygTextarea'
import MaterialInput from 'shared/ui/MaterialInput'
import {reduxForm} from 'redux-form'

  render(){
    
    return(
      <form onSubmit={this.props.handleSubmit}>
        <WysiwygTextarea
          change={this.props.change}
          name="message"
          classes={'wysiwyg__component_chat'}
          toolbarClassName="demo-toolbar-absolute"
        />
        {this.props.key && <div className="dragon-form__field" style={{display : 'none'}}>
          <MaterialInput
            name="messageId"
          />
        </div>}
        <Button type="submit" variant="outlined">Отправить</Button>
      </form>
    )
  }
}

const validate = ({message}) => {
  const errors = {}
  if (!message) errors.name = 'Введите текст сообщения'
  return errors
}

export default reduxForm({
  form: 'room', // как вместо 'room' закинуть данные из props ?
  validate
})(ChatForm)

Как в название формы закинуть данные из props ?

Answer 1

[Антон Спирин]

export default reduxForm({ validate })(ChatForm);

<ChatForm form={name} />

Если хочется передавать имя свойством name, то можно обернуть компонент в connect:

const mapStateToProps = (state, ownProps) => ({
  form: ownProps.name,
});

export default compose(
  connect(mapStateToProps),
  reduxForm({ validate }),
)(ChatForm);

<ChatForm name={name} />

Comments

[Сергей Сунцев]

Подошло, только надо учитывать, что при первой отрисовке
<ChatForm form={name} />

name должен существовать
{name && <ChatForm form={name} />}