CODEWITHSUNDEEP
reactjsredux-form
Patrick
Patrick

Reputation: 11

How to hide/show Field in FieldArray for Redux Form v6

given the fact in the example http://redux-form.com/6.0.5/examples/fieldArrays/. All the renderField.. functions are outside of the React Class. Hence how am i suppose to use react state or props to determine whether i want to hide or show a Field?

What I'm trying to do is to have a button to manipulate a state to display 'block' or 'none' for a Field. Can someone guide me? I tried to put the renderField variable inside the render of the React class, however this result in bugs.

Upvotes: 1

Views: 1547

Answers (2)

Patrick
Patrick

Reputation: 11

Thanks to Runaground who suggested an answer to me. I came to realized that I can pass in state as props to the FieldArray, such as 

<FieldArray name="histories" component={renderHistories}  openClose={this.state.openClose}/>

This allow me to utilize an array of state from this.state.openClose, to control which field i would like to hide or show.

<Field
  name={`${histories}.details`}
  type="text"
  component={renderField}
  style={{display: openClose[index] ? 'block' : 'none'}}
 />

However, even though I am able to control the display of the Field, the field array does not get rerendered.

Hence, I have to add on two functions 

fields.push({});
setTimeout(()=>{
 fields.pop();
}, 1);

that is taken from http://redux-form.com/6.0.5/docs/api/FieldArray.md/, to actually rerender the fieldarray whenever i hide or show the field. Hopefully there is a more elegant way to do this as the fieldarray does flicker.

Upvotes: 0

Runaground
Runaground

Reputation: 83

All the props which are passed to Field are accessible to component props.

<Field
  name={foo}
  type="text"
  component={TextField}
  displayBlock={displayBlock}
/>



const TextField = props => {

    if(props.displayBlock) {
        ...
    }

    return (
        <div>
            <input {...props.input} />
        </div>
    );
};

Upvotes: 1

Related Questions