Variable inside componentDidMount are undefined using Reactjs

Question

I have the following block of code:

const UserNotification = ({ user }) => {
  const url = `https://api.thingspeak.com/channels/${user.channel}/feeds.json?&dynamic=true`;
  console.log(url); //https://api.thingspeak.com/channels/594944/feeds.json?&dynamic=true OK
  return <UserNoti url = { url } />
}

class UserNoti extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: [],
      isLoaded: false,
    };
  }

  componentDidMount() {
   fetch(url)
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoaded: true,
          items: json,
        });
      });
  }
 render() {...}}

However, I get a 'url' is not defined no-undef for the following line: fetch(url) in componentDidMount(). How can I call url variable inside componentDidMount method?

UjinT34 · Accepted Answer · 2018-10-29 16:34:00Z

2

Use this.props.url to access url propery you pass to UserNoti class.

componentDidMount() {
   fetch(this.props.url)
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoaded: true,
          items: json,
       });
   });
}

answered Oct 29, 2018 at 16:34

UjinT34

4,9971 gold badge14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matei Radu · Accepted Answer · 2018-10-29 16:40:33Z

2

In UserNotification you pass url as a component prop. With ES6 class components, props are accessed using this.props.propName. So, in your case, you should do:

componentDidMount() {
  fetch(this.props.url)
    .then(res => res.json())
    .then(json => {
      this.setState({
        isLoaded: true,
        items: json,
      });
    });
}

More info from the official React documentation on Components and Props.

edited Oct 29, 2018 at 16:40

answered Oct 29, 2018 at 16:36

Matei Radu

2,0783 gold badges28 silver badges45 bronze badges

Collectives™ on Stack Overflow

Variable inside componentDidMount are undefined using Reactjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related