Trying to use fetched third party api data to fill form

[OHammerpaw]

Describe the bug A clear and concise description of what the bug is. Not a bug, just chasing my own tail a bit

What is the problem you are trying to solve? I am trying to use a backend route (that works) to fill createActivity form with the fetched data to generate a 'random' activity

Expected behavior A clear and concise description of what you expected to happen.

I am wanting to have the users push a button to fill form with fetched api data

What is the actual behavior? A clear and concise description of what actually happened.

Currently nothing happens when the button is pushed

Post any code you think might be relevant (one fenced block per file)

import React, { useState } from 'react'

import { randomActivity } from '../../api/activity'
import ActivityForm from '../shared/ActivityForm'

const RandomActivity = ({ user, msgAlert }) => {
    const defaultActivity = {
                activity: '',
                type: '',
                accessibility: '',
                participants: '',
                price: '',
                progress: 0,
                private: false
            }

    const [activity, setActivity] = useState(defaultActivity)

    const handleRandomActivity = (e) => {
        let results = ''
        e.preventDefault()

        randomActivity(user, activity)
        .then(res => res.json())
        .then(jsonData => {
            setActivity({
                activity: jsonData
            })
            console.log(jsonData,'~~~~~~~~~')
        })

    }

    // return(

    // )
}

// const RandomActivity = ({ user, msgAlert, triggerRefresh }) => {
//     const defaultActivity = {
//         activity: '',
//         type: '',
//         accessibility: '',
//         participants: '',
//         price: '',
//         progress: 0,
//         private: false
//     }

//     const [activity, setActivity] = useState(defaultActivity)

//     const handleChange = (e , target) => {

//         setActivity(prevActivity => {

//             const { name, value } = target
//             const updatedName = name
//             let updatedValue = value
//             // handle number type
//             if(target.type === 'number') {
//                 // change from string to actual number
//                 updatedValue = parseInt(e.target.value)
//             }

//             const updatedActivity = { [updatedName]: updatedValue }

//             // const updatedActivity = {  
//             //     activity: activity.activity,
//             //     accessibility: activity.accessibility,
//             //     type: activity.type,
//             //     participants: activity.participants,
//             //     price: activity.price
//             // }

//             return { ...prevActivity, ...updatedActivity}
//         })
//     }
//     const handleRandomActivity = (e) => {
//         e.preventDefault()

//         randomActivity(user, activity)
//         .then(res => {
//             const random = res.data
//             setActivity({
//                 activity: random.activity,
//                 type: random.type,
//                 accessibility: random.accessibility,
//                 participants: random.participants,
//                 price: random.price,
//             })
//         })
//         .then(() => {

//             msgAlert({
//                 heading: 'Success',
//                 message: 'Created Activity',
//                 variant: 'success'
//             })
//         })
//         .then(() => triggerRefresh())
//         .catch((error) => {
//             msgAlert({
//                 heading: 'Failure',
//                 message: 'Create Activity Failure' + error,
//                 variant: 'danger'
//             })
//         })
//     } 

//     return (
//         <ActivityForm
//             activity={ activity }
//             handleChange= { handleChange }
//             handleSubmit= {handleRandomActivity}
//         />
//     )
// }

export default RandomActivity

What is your best guess as to the source of the problem?

I feel like I am referring to the api data incorrectly

What things have you already tried to solve the problem?

The latest attempt is what is not commented out, but looking at it now, I think a combination of my attempts may work? I have basically tried variations of everything in that code block so far.

Additional context Add any other context about the problem here. I know I am so close to this, but I am having trouble actually getting it

Paste a link to your repository here

[OHammerpaw]

I was calling the api in the wrong file and needed to cove function into file where state was being called