score:0

lets assume you got a response in data object. so you can set that data into state like below:

this.setstate({items: data});

then you can pass that state into another component. complete examples is given here:

parent component which will be in app.js

import react, {component, useeffect, usestate} from 'react';
import {pchild} from "./pchild";

export class parent extends component {
    constructor(props) {
        super(props);
        this.state = {items: []};
    }

    componentdidmount() {
        let data = [];
        data.push({track: { id:1, name: 'black sabbath, from the album black sabbath (1970)'}});
        data.push({track: { id:2, name: 'blackfield, from the album blackfield (2004)'}});
        data.push({track: { id:3, name: 'bo diddley, from the album bo diddley (1958)'}});
        data.push({track: { id:4, name: 'damn yankees, from the album damn yankees (1990)'}});
        this.setstate({items: data});
    }

    render() {
        return (
            <div>
                <pchild items={this.state.items} name="khabir"/>
            </div>
        );
    }
}

child component which is used in parent component:

import react, {useeffect, usestate} from 'react';

// parent to child communication
export class pchild extends react.component {

    componentdidupdate() {
        console.log(this.props.items);
        console.log(this.props.name);
    }

    render() {
        return (
            <div>
                {this.props.items.map((item, i) => {
                    return <li key={item.track.id}>
                        {(`item ${i+1} - ${item.track.name}`)}
                    </li>
                })}
            </div>
        );
    }
}

update:: as per your comment, i added the following code.

const example = (props) => {
    const [credential, setcredential] = usestate({});
    const [response, setresponse] = usestate({});

    const callupdateapi = async () => {
        try {
            const response = await axios.put(`https://jsonplaceholder.typicode.com/posts/${id}`, {
                method: 'put',
                body: json.stringify({
                    email: credential.email,
                    password: credential.password,
                }),
                headers: {
                    "content-type": "application/json; charset=utf-8"
                }
            })
                .then(response => setresponse(response.json()))
                .then(json => console.log(json));
            console.warn(response.data);
        } catch (error) {
            console.warn(error);
        }
    };

    return (
        <div>
            <formik
                initialvalues={initialvalues1}
                validationschema={validation}
                onsubmit={values => {
                    console.log("onsubmit", json.stringify(values, null, 2));
                    //send data to backendapi, after successful response display in another page
                    setcredential(values);
                    callupdateapi();

                }}
            >
                {response ? <pchild items={response}/> : null}
            </formik>
        </div>
    )
};

export default example;

Related Query

More Query from same tag