Как сохранить состояние, которое я настроил для использования в других компонентах (чтобы я мог затем отправить значение этого компонента в базу данных)

Question

Я пытаюсь сохранить this.state.url, который я получаю из firebase после успешного сохранения изображения в firebase. Прямо сейчас я записываю ответ в консоли и могу отобразить URL ответа в виде изображения на странице. Я хочу, чтобы некоторые могли хранить этот URL как строку, чтобы я мог отправить ее в отдельную базу данных SQL, которую я настроил. Спасибо за вашу помощь ! :)

Я не должен понимать, как работают реквизиты, потому что я создал другой реквизит, но должен быть безуспешно связан с ними. Мне просто нужно, чтобы строка была отправлена ​​в базу данных SQL через axios, так что, если есть способ сделать это в этом компоненте, это было бы здорово - или если единственный способ сделать это - через другой компонент, то это тоже работает. Сейчас я пытаюсь установить this.state.url как const, чтобы я мог ссылаться на него в другом компоненте, и он, кажется, не работает.

import {storage} from '../firebase';


class ImageUpload extends Component {
  constructor(props) {
    super(props);
    this.state = {
      image: null,
      url: '',
      progress: 0
    }
    this.handleChange = this
      .handleChange
      .bind(this);
      this.handleUpload = this.handleUpload.bind(this);
  }
  handleChange = e => {
    if (e.target.files[0]) {
      const image = e.target.files[0];
      this.setState(() => ({image}));
    }
  }
  handleUpload = () => {
      const {image} = this.state;
      const uploadTask = storage.ref(`images/${image.name}`).put(image);
      uploadTask.on('state_changed', 
      (snapshot) => {
        // progrss function ....
        const progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
        this.setState({progress});
      }, 
      (error) => {
           // error function ....
        console.log(error);
      }, 
    () => {
        // complete function ....
        storage.ref('images').child(image.name).getDownloadURL().then(url => {
            console.log(url);
            this.setState({url});
        })
    });
  }


  render() {
    const style = {
      height: '100vh',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center'
    };
    return (
      <div style={style}>
      <progress value={this.state.progress} max="100"/>
      <br/>
        <input type="file" onChange={this.handleChange}/>
        <button onClick={this.handleUpload}>Upload</button>
        <br/>
        <img UserUpload={this.state.url || 'http://via.placeholder.com/300x300'} alt="Uploaded images" height="300" width="300"/>
      </div>
      // const UserUpload = this.state.url
    )
  }
}

export default ImageUpload;```


Right now I'm just rendering the url via an img src to the page and console.log'ing the url response i get from firebase.

I am super thankful for any help you all give - I'm extremely new to coding and appreciate any help I can get!