Redux Form FieldArray passing state problem - reactjs

Question

i'm using redux-form field array to make multiple data input that consist of data type (selector), key (text), value(text). so, i have to trigger the selector to show/hide field based on the value by passing the redux state. but i got problem to pass array state. here's my code. i've tried to pass fields.map but it didnt works. any suggestion?
{/* <li class="list-group-item">
{(touched || submitFailed) && error && <span>{error}</span>}
</li> */}
{fields.map((member, index) => ( <<<<<<<<<<<<<<<<<<<<<<<< how can i pass this to state?
<li class="list-group-item" key={index}>
{/* <h4>Member #{index + 1}</h4> */}
<div class="form-row">
<Field
name={`${member}.tipeData`} <<<< how can i pass this ${member} to state?
component={renderDropdown}
// data={colors}
valueField="value"
textField="color"/>
{member}
<Field
name={`${member}.key`}
label="Key"
type="text"
component={renderField}
/>
{tipeDataValue === 'String' && <>
<Field
name={`${member}.value`}
type="text"
label="Value"
placeholder="bundle"
component={renderField}
/></>}
{tipeDataValue === 'Integer' && <>
<Field
name={`${member}.value`}
type="number"
label="Value"
placeholder="bundle"
component={renderField}
/></>}
{tipeDataValue === 'Boolean' && <>
<Field
name="tipeData"
component={renderBoolean}
data={colors}
valueField="value"
textField="color"/>
</>}
<div class="col">
<button
class="form-control btn btn-danger"
type="button"
title="Remove Member"
onClick={() => fields.remove(index)}
>X</button>
</div>
</div>
</li>
))}
FieldArraysForm = reduxForm({
form: "fieldArrays",
// validate
})(FieldArraysForm);
const selector = formValueSelector('fieldArrays') // <-- same as form name
FieldArraysForm = connect(
state => {
// can select values individually
// const member = selector(state, fields)
const tipeDataValue = selector(state, 'tipeData')
// or together as a group
return {
tipeDataValue,
}
}
)(FieldArraysForm)
export default FieldArraysForm

Answer 1

Maybe try consolidating your reduxForm and connect calls.
My project uses this style:
const formname = 'fieldArrays'
const selector = formValueSelector(formname)
class FieldArraysForm extends Component {
render() {
const {tipeData } = this.props
...
return(
...
)
}
}
export default compose(
connect(state => ({
tipeDataValue: selector(state,'tipeData')
})),
reduxForm({
form: formname,
}),
)(FieldArraysForm)