I need to pass a URL from a class component to another

Question

here is my QR component :

import React, { Component } from "react";
class QR extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { catImageUrl } = this.props;
    const qrUrl = `https://qrtag.net/api/qr_12.svg?url=${catImageUrl}`;
    if (!catImageUrl) return <p>Oops, something went wrong!</p>;
    return <img className="QR" src={qrUrl} alt="qrtag" />;
  }
}
export default QR;

I need to pass the const qrURL to the next component Form.js to use it in ajax call to get its data and pass it to the next api request to send it to an email

class Form extends React.Component{

  constructor(props) {
    super(props);
    this.state = {
    name: '',
    email: '',
    message: '',
  }

  }
  const{qrUrl}=this.props;
  FetchQRURL = () => {
    fetch(`${qrUrl}`)
      .then((response) => response.json())
      .then((data) => {
        this.setState({
          message: data,

        });
      })
      .catch((error) => console.log(error));
  };
  handleSubmit(e){
    e.preventDefault();
    axios({
      method: "POST", 
      url:"http://localhost:3002/send", 
      data:  this.state
    }).then((response)=>{
      if (response.data.status === 'success'){
        alert("Message Sent."); 
        this.resetForm()
      }else if(response.data.status === 'fail'){
        alert("Message failed to send.")
      }
    })
  }

  resetForm(){

     this.setState({name: '', email: '', message: ''})
  }

  render() {

    return(
    <div className="App">
    <form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
    <div className="form-group">
        <label htmlFor="name">Name</label>
        <input type="text" className="form-control" id="name" value={this.state.name} onChange={this.onNameChange.bind(this)} />
    </div>
    <div className="form-group">
        <label htmlFor="exampleInputEmail1">Email address</label>
        <input type="email" className="form-control" id="email" aria-describedby="emailHelp" value={this.state.email} onChange={this.onEmailChange.bind(this)} />
    </div>
    <div className="form-group">
        <label htmlFor="message">Message</label>
        <textarea className="form-control" rows="5" id="message" value={this.state.message} onChange={this.onMessageChange.bind(this)} />
    </div>
    <button type="submit" className="btn btn-primary" onClick="">Submit</button>
    </form>
    </div>
    );
  }

  onNameChange(event) {
    this.setState({name: event.target.value})
  }

  onEmailChange(event) {
    this.setState({email: event.target.value})
  }

  onMessageChange(event) {
    this.setState({message: event.target.value})
  }
}

export default Form;

you can see I tried to pass it as props but it doesn't work

here I tried to pass it as props(in my app.js)

import React, { Component } from "react";
import RandomCat from "./RandomCat.js";
import QR from "./QR.js";
import Form from "./form.js";

class BooksApp extends Component {

  state = {
    showCatImage: false,
    showQrCode: false,
    catImageUrl: "",

  };


  handleFetchRandomImage = () => {
    fetch("https://aws.random.cat/meow")
      .then((response) => response.json())
      .then((data) => {
        this.setState({
          catImageUrl: data.file,
          showCatImage: true,
        });
      })
      .catch((error) => console.log(error));
  };


  handleShowQrCode = () => {
    this.setState({ showQrCode: true });
  };



  render() {
    const { showCatImage, showQrCode, catImageUrl,qrUrl } = this.state;

    return (
      <div className="app">
        <div className="first">
          {/* The time below shows cat image if showCatImage === true and returns nothing if false */}
          {showCatImage && <RandomCat catImageUrl={catImageUrl} />}

          <button className="catButton" onClick={this.handleFetchRandomImage}>
            Generate Cat
          </button>
        </div>
        <div className="second">
          {showQrCode && <QR catImageUrl={catImageUrl} qrUrl={qrUrl}/>}

          <button className="QRButton" onClick={this.handleShowQrCode}>
            Geanerate QR
          </button>

        </div>
      <div>
        <Form qrUrl={qrUrl}/>
      </div>
      </div>
    );
  }
}
export default BooksApp;

any idea how can I pass it to the Form.js?

Answer 1

You have to pull the constant qrUrl to the parent component which is BooksApp in your case.

Set it to the state and pass it down as props.

state = {
    showCatImage: false,
    showQrCode: false,
    catImageUrl: "",
    qrUrl: ""
};

handleFetchRandomImage = () => {
    fetch("https://aws.random.cat/meow")
      .then((response) => response.json())
      .then((data) => {
        this.setState({
          catImageUrl: data.file,
          showCatImage: true,
          qrUrl: `https://qrtag.net/api/qr_12.svg?url=${data.file}` // Set it here
        });
      })
      .catch((error) => console.log(error));
  };

 handleShowQrCode = () => {
    this.setState({ showQrCode: true });
  };



  render() {
    const { showCatImage, showQrCode, catImageUrl, qrUrl } = this.state;

    return (
      <div className="app">
        <div className="first">
          {/* The time below shows cat image if showCatImage === true and returns nothing if false */}
          {showCatImage && <RandomCat catImageUrl={catImageUrl} />}

          <button className="catButton" onClick={this.handleFetchRandomImage}>
            Generate Cat
          </button>
        </div>
        <div className="second">
          {showQrCode && <QR catImageUrl={catImageUrl} qrUrl={qrUrl}/>}

          <button className="QRButton" onClick={this.handleShowQrCode}>
            Geanerate QR
          </button>

        </div>
      <div>
        <Form qrUrl={qrUrl}/>
      </div>
      </div>
    );
  }
}

export default BooksApp;

The just use it with this.props.qrUrl in your other components.