How to pass the response to another component?

Question

React

Hello everyone

At the front, I almost never wrote anything, so don't judge strictly, I'm just learning to

have a component, a button through which I receive data from the server:

const baseURL = "http://localhost:4000/test";
import React from 'react';
import axios from 'axios';
import ImageComponent from "./imageComponent";

class ButtonComponent extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            lalka: '',
            isLoading: false,
        };
        this.click = this.click.bind(this);
    }

    click() {

        this.setState({ isLoading: true });

        axios.get(baseURL, )
            .then((response) => {
                this.setState({ lalka : response.data });
            })
            .catch((err) => {
                console.log(err);
            });
    }

    render() {
        return  (
            <div>
                <button onClick={this.click} > click me </button>
            </div>
        );
    }
}

export default ButtonComponent;

the response that comes from the server I need to display in another component

import React, { Component } from 'react';

class ImageComponent extends Component {
    render() {
        return (
            <React.Fragment>
                <p>{this.props.data}</p>
            </React.Fragment>
        );
    }
}

export default ImageComponent;

please tell me who knows how to do it?

Answer 1

Let the button propsaccept a callback, which it will call when the data is received and will pass this data into the arguments. You need to create a callback in the component in which you want to receive data and set the state with data in this callback