How to submit data from one component using Formik to another component?

How to submit data from one component using Formik to another component?
0

hi, in one component I have a Formik form that when I submit it I get an object back, great!

So, how can I now submit that data in a function on another component with state?

this is my function on my HomeScreen class component that adds a report:

addReport = async report => {
        try {
            const [modalOpen, setModalOpen] = useState(false)
            const snapshot = await firebase.database().ref('reports')
                .child(this.state.currentUser.uid).orderByChild('name').equalTo(report).once('value')
            if (snapshot.exists()) {
                alert('Unable to add report as already exists')
            } else {
                const key = await firebase.database().ref('reports').child
                    (this.state.currentUser.uid).push().key

                const response = await firebase.database().ref('reports').child(this.state.currentUser.uid).child(key)
                    .set({ name: report, saved: false })
                this.setState((state, props) => ({
                    reports: [...state.reports, { name: report, saved: false }],
                    reportsNew: [...state.reportsNew, { name: report, saved: false }],
                    isAddNewReportVisible: false
                }), () => { })
                console.log(this.state.reports)
                setModalOpen(false)
            }
        } catch (error) {
            console.log(error)
        }
    }

and here is my Formik form on my other class component AddReportForm

<Formik
                    initialValues={{ name: '', latitude: this.props.latitude, longitude: this.props.longitude, read: false, saved: false }}
                    onSubmit={(values) => {
                        addReport(values)
                    }}
                >
                    {(props) => (
                        <View>
                            <TextInput
                                multiline
                                style={styles.input}
                                placeholder='Name'
                                onChangeText={props.handleChange('name')}
                                value={props.values.name}
                            />
                            <View style={globalStyles.button}>
                                <Button
                                    color={colors.btnTextColor}
                                    title='Submit' onPress={props.handleSubmit}
                                />
                            </View>
                        </View>
                    )}
                </Formik>

Put a component above it with some state. Pass the state as props to the component that’s using the data. Pass a callback that sets the state to your component with the form. On submit, set the state.

Formik doesn’t do anything special that’s different overall to how you’d normally pass/update state, it has internal state used to help you produce forms, but outside of that form, it should just be treated as another component

Thanks, It’s really confusing, I have passed addReport down from ./screens/HomeScreen.js - the main page holding the addReport function
and into
./components/AddReportModal.js - the modal holding the AddReportForm
and then tried to pass into
./components/AddReportForm.js - where the actual form is submitting the data

Please help, Here is my repo: https://github.com/jbiddulph/react-wow

I am now getting errors: ReferenceError: Can’t find variable: addReport in HomeScreen render line 125
this is line 125:

<AddReportModal addReport={addReport} />

ok so I had to change it to:

addReport={this.addReport}

Although now I am getting warnings and it’s not working:

Warning: An unhandled error was caught from submitForm() referenceError: Can't find variable: addReport

Warning: "AddReportForm" (...): when calling super() in AddReportForm", make sure you pass up the same props that your components structure was passed.

As far as I can see, the code hasn’t been pushed - there isn’t any code in Home or AddReportForm

sorry, all pushed now

Not how you pass props in React:

constructor({ addReport }, props) 

addReport is a prop, you aren’t passing the props + another object

oh yeah, I kind of get it, so I can just use this.props.addReport

now I’m getting Invariant Violation: Objects are not valid as a React child (found: object with keys {name, latitude, longitude, read, saved}) If you meant to render a collection of children, use and array instead

I think something that you’re passing down isn’t what you think it is (ie it’s an object, not, say, a string). Check what those properties all are. I can’t see what’s triggering it at the minute, I’ll try to get it from going back through the code

This would be easier to debug if it’s visible – would it be possible to put a minimal version of it it on https://snack.expo.io/ ?

As you.deleted a companion post, just posting the reply here:

You’ve put two completely different things in an array – your “reports” has two objects there that are completely different shapes. You’re missing out the context in which you’re trying to use them, but for sanity you would want “reports” to be an array of reports, and each report to be the same type of thing, otherwise you’re making it incredibly difficult to code against