1

i'm new to React and I need help with passing props to API URL. I have two class components -> (MyClass) works fine. However when I use variable from MyClass as props in other class component (MyOtherClass), it seems to work only in "render" part. I mean <div> variable: {variable}, url : {url2}</div> is shown in app as expected but when I try to pass this variable from props to API URL, it is not working and instead the URL looks like this: "http://localhost:55111/status/[object Object]". Any ideas what might cause the problem??

Here's my code:

import React, { Component } from 'react'
import axios from 'axios'

export default class MyClass extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: {}
        }
    }
   
    componentDidMount() {
        axios
            .get("http://localhost:55111/start")
            .then(response => {
                this.setState({
                    data: response.data
                });
                console.log(this.state.data);
            })
            .catch(err => {
                this.err = err;
            });
    }
    render() {
        const variable  = this.state.data.sent
        return (
            <div>
                <h1>Hello worlds</h1>
                <p>var: {variable}</p>
                <MyOtherClass variable={variable} />
            </div>

        );
    }
}

This is the other class component causing troubles:

class MyOtherClass extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: {}
         };
    }
    
    async componentDidMount() {
        const {variable} = this.props
       
        axios.get(`http://localhost:55111/status/${variable}`)
        .then(response => {
            this.setState({
                data: response
            });
            console.log(this.state);
        })   

    render() {
        const { variable } = this.props
        const url2 = `http://localhost:55111/status/${variable}`
        return (
            <div>variable: {variable}, url : {url2}</div>
        );
    }
}
Kaja Duff
  • 11
  • 2

1 Answers1

1
import React, { Component } from 'react'
import axios from 'axios'

export default class MyClass extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: {}
        }
    }
   
    componentDidMount() {
        this.getData()
    }
    async getData() => {
          const response = await axios.get("http://localhost:55111/start")
          this.setState({data: response.data})          
    }
    render() {
        const variable  = this.state.data.sent
        return (
            <div>
                <h1>Hello worlds</h1>
                <p>var: {variable}</p>
                <MyOtherClass variable={variable} />
            </div>

        );
    }
}

Use the async await.

Jay Parmar
  • 368
  • 2
  • 9
  • 1
    Thank you for your answer, however this code is not working for me at all. In addition I have problem with the other class component where in render () I get desired URL "url : http://localhost:55111/status/131b3929-e72e-4da8-b2b5-b54f7a6d17ed" but in API url there's ""http://localhost:55111/status/undefined"" or "http://localhost:55111/status/[object Object]" – Kaja Duff Jun 24 '20 at 16:43
  • @Kaja Duff this is the exact problem I'm facing now, can you help me with that on how did you solve the issue? – justbeingalearner Mar 31 '21 at 09:45
  • @Jay Parmer your URL is wrong, it's not what the op asked for. – justbeingalearner Mar 31 '21 at 09:46
  • @justbeingalearner Hi. In the meantime I changed my code completely to using "React Hooks" so I cannot give you exact example. However back then I solved this problem with help of this post : https://stackoverflow.com/questions/44182951/axios-chaining-multiple-api-requests – Kaja Duff Apr 01 '21 at 11:06