Here is a little background on what I'm trying to do. When the user clicks on add trip, I am using Redux Form Field Arrays to create fields.
The problem I am facing is that I want the form in the field array to change based on what option the user selects for the trip type (Point-to-Point, Local Transportation). So, I followed an example off of the Redux Form API website for Selecting Form Values. This did not work for me because the field names are dynamic and I have no idea on how to do this with the dynamic field names. Here is the code I've tried and any help would be appreciated. Thanks!
Code for service type radio buttons:
<fieldset className="row">
<div className="col">
<Field name={`${member}.serviceType`} className="with-gap" component="input" type="radio" value="Point" id="trip1_choice1"/>
<label htmlFor="trip1_choice1">
Point-to-Point
</label>
</div>
<div className="col">
<Field name={`${member}.serviceType`} className="with-gap" component="input" type="radio" value="Local" id="trip1_choice2" />
<label htmlFor="trip1_choice2">
Local Transport
</label>
</div>
</fieldset>
Code for changing forms based on which radio button is selected:
{[`${member}.serviceType`] === "Point" &&
//HTML Form Code goes here
}
As you can see I'm having trouble with accessing the value of the dynamic field array. [${member}.serviceType] does not work.