What I'm trying to do is clean a state of my objects props in my class component on screen change
here is where I'm rendering the fields:
class InputBody extends Component {
constructor(props) {
super(props);
this.state = {
fields: JSON.parse(this.props.route).message,
};
}
render() {
return (
<Fragment>
{Object.keys(JSON.parse(this.props.route).message).length > 0 ? (
<FieldArraysForm all={JSON.parse(this.props.route).message} native={this.props} />
) : (
<ActivityIndicator size="large" color="#eb6b09" />
)}
</Fragment>
);
}
}
Then I'm handling my fields and input types in here:
class RenderField extends Component {
render() {
return (
<Fragment>
<Texto>{this.props.label}</Texto>
<TextInput
onChangeText={this.props.input.onChange}
{...this.props.input}
keyboardType={this.props.type}
/>
</Fragment>
);
}
}
And finally I'm getting the values:
class FieldArraysForm extends Component {
render() {
const {handleSubmit} = this.props.native;
// event listener
const getFields = async (values) => {
return sleep(500).then(() => {
// implementar prop.reset() as soon as I leave the screen, but how can I make it ?
console.log(JSON.stringify(values))
})
}
return (
<Form>
{this.props.all.map((item) => (
<Field
key={item._id}
name={`customInput.${item._id}`}
component={RenderField}
label={item.field}
type={item.typeFieldAltText}
/>
))}
<View>
<TouchableOpacity onPress={handleSubmit(getFields)}>
<Text>Save Form</Text>
</TouchableOpacity>
</View>
</Form>
);
}
}
Someone knows how can I clean my state in class component ?
Obs: I'm using: react-navigation v6.
Make a reset function in your InputBody component and pass that function as a prop to your FieldArrayForm compoent.
class InputBody extends Component {
constructor(props) {
super(props);
this.state = {
fields: JSON.parse(this.props.route).message,
};
}
reset () {
this.setState({});
}
render() {
return (
<Fragment>
{Object.keys(JSON.parse(this.props.route).message).length > 0 ? (
<FieldArraysForm all={JSON.parse(this.props.route).message} resetForm={reset} native={this.props} />
) : (
<ActivityIndicator size="large" color="#eb6b09" />
)}
</Fragment>
);
}
}
Then call that reset props in your FieldArraysForm component
const getFields = async (values) => {
return sleep(500).then(() => {
// implementar prop.reset() as soon as I leave the screen, but how can I make it ?
console.log(JSON.stringify(values))
this.props.reset()
})
}