React - Access or assign data object directly to Field component for FieldArray

Question

I am having some concept problem in using FieldArray, I have multiple Select components wired to FieldArray, each select component should update value onChange and should delete it through api. To be able to perform api request I need to access other details for the field like id. I have setup my component something like shown below, it works fine without api call..

renderAdditionalSpeakers({fields}){
    return (<div>
      {
        fields.map((speaker,index)=>
          <Field
            name={`${speaker}.speakerid`}
            label="Choose Speaker"
            type="select"
            component={this.renderSelectWithDelete}
            mandatory='false'
            placeholder='Select Speaker'
            opts={this.props.speakers}
            key={`KEY-${index}`}
            deleteaction={() => fields.remove(index)}
            onChange={this.onSpeakerChange.bind(this)}
        />
      )
    }
    <div className="form-group row">
      <div className="col-sm-3">&nbsp;</div>
      <div className="col-sm-9 col-sm-offset-0">
        <Button className="button-theme button-theme-blue" type="button" onClick={() => fields.push({})}>Link More Speaker</Button>
      </div>
    </div>
    </div>);
  }

and render method look like this

render() {

    var {handleSubmit, invalid, pristine, submitting,speakers,tracks} = this.props;

    return(
      <div>
        <form onSubmit={handleSubmit(this.onFormSubmit.bind(this))}>
          <FieldArray name="additionalspeakers" component={this.renderAdditionalSpeakers.bind(this)}/>
        </form>
      </div>
    );
}

From the above code, I need to call api with in ondeleteaction callback and onChange action. This is only possible when I can access the json object which consist of following values

{
   "id":"1",
   "speakerid":"23",
   "sessionid":"102",
   "eventid":"200"
}

How to achieve?

Thanks for help.

Dario · Accepted Answer · 2017-10-25 08:06:20Z

1

You can pass further arguments to your field array and use them within your render method, like

<FieldArray name="additionalspeakers" component={this.renderAdditionalSpeakers.bind(this)} props={{ onDeleteAction: this.ondeleteaction, onChange: this.onChange }} />

(where this.ondeleteaction and this.onChange are the callback function defined in your component).

Then you can declare the FieldArray as:

renderAdditionalSpeakers({fields, onDeleteAction, onChange}) {

and use the function callbacks within the component.

answered Oct 25, 2017 at 8:06

Dario

6,3109 gold badges42 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React - Access or assign data object directly to Field component for FieldArray

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related