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;
Source: stackoverflow.com
Related Query
- How to pass the API response data to another react page
- React API response Data, display on another page
- Does not show API fetch response data in the page - React Redux
- Unable to send api response data from express to react after refreshing the page
- Fetch data from API when form's search button clicked and show data on another page in React JS
- Update a React Element with the Data of Another Component's API Response
- How can I use response data from an API to call another different API request in React UseEffect?
- How to get and display specific data from onClick into another page in React
- React Context API - persist data on page refresh
- How do I access data returned from an axios get to display on a web page using react js?
- React router - pass api data to the linked component to open with a new page
- How to pass data from a page to another page using react router
- REACT JS How can I display my fetched API data from onClick?
- How can I make a request to an API based on the response from another request? React Hook "useSwr" cannot be called inside a callback
- How to fetch and display data from Express API to a React app?
- How to display data from api in React
- Why does data from my api only display once and when I refresh the page it gives an error
- Want to display a default data from API as soon as page opens before any input by user?
- How to dispatch response data from api on action in react redux?
- How to validate the form and send user to another page on successful data filled in form fields in React JS?
- How to make sure API calls completes before another page loads in React
- How to save previous state/ page data before going to another page in React JS
- How to display data from the api in react
- unable to display fetched API data in react
- How to display data from api in react component
- Navigate to another page with data in a React Component after fetch
- How do I display data from api using react and redux
- How to display the information submitted in the html form on another page using react js?
- How to load and display data with React from an API running on localhost
- How can I push my react form data to a dynamic API query in another component
More Query from same tag
- How to close modal in react hooks?
- How to change Bootstrap navbar color on scroll in React.js?
- Sentry error - IndexSizeError: The index is not in the allowed range
- Integrating jQuery plugin with React
- Module not found: Error: Can't resolve 'web-vitals' in '/app/src'
- Generating multiple links (URL) to display different states of my react App
- How to use create-react-app with an older React version?
- How can I pass default theme that is provided by MUI5 and create a style for any component in MUI5?
- calculating the invoice total and invoice quantity from an array of objects in react
- Is it possible to show all <select> <option>s as a toggle?
- conditional rendering of components based on state change
- React map object as array?
- How to define the printable area of a react page?
- Promise {<pending>} of bcrypt inside promise
- Ant design Select component OptGroup in options prop
- How do I add BrowserRouter in index.js file of a react app?
- Pass React component as props to be used as a template to render nodes in a TreeView
- Can you use componentDidMount() on a React class that doesn't extend Component?
- Multiple NPM errors while trying to install dependecies
- Material UI and React &hover selector not working
- Unable to write a snapshot test of a component that is calling a moment method within the render
- React Native multi line TextInput, text is centered
- Passing props to Children of Children (nested component tree)
- How to incorporate semantic HTML into React?
- Pass data from parent to child and sibling children using context api
- how can i make a component re render in react
- trying to unit test a function inside react es6 component
- Update field value from predefined value redux-form
- Trying to map array from store but getting TypeError: *array*.map is not a function
- Render variable component name in reactjs