Agfdhyk

React newbie here... I am pulling my hair out trying to figure this out... I am trying to use bandsintown API to search for bands then display the results. I am having a difficult time taking the entered band name and then using that as part of the fetch to the bansintown API. It appears that things are re-rendering or not rendering in the correct order, etc. I have tried putting my call to fetch in componentDidMount but that renders before the 'band' state is set...please help... here is a snippet of my code:

import React, { Component } from "react";



class BandSearch extends Component {

  constructor(props) {

    super(props);



    this.state = {

      band: "",

      events: 

    };

  }



  componentDidMount() {

    this.handleChange();

  }



  async getBand(e) {

    e.preventDefault();

    try {

      const res = await fetch(

        `https://rest.bandsintown.com/artists/${

          this.state.band

        }/events?app_id=acdb6da27e696632f85c3733dd43db52`

      );

      const events = await res.json();

      this.setState({

        events: events

      });

    } catch (e) {

      console.log(e);

    }

  }



  handleChange = () => {

    this.setState({

      band: this.result.value

    });

    console.log("state", this.state);

  };



  render() {

    console.log(this.state.band);

    return (

      <div>

        <h3>Enter Band to check on tour dates</h3>

        <form>

          <input

            type="text"

            placeholder="Enter band name"

            ref={input => (this.result = input)}

            onChange={this.handleChange}

          />

          <button onClick={this.getBand}>Search</button>

        </form>

      </div>

    );

  }

}



export default BandSearch;

Thanks so much in advance!!

You need to pass the event from the onChange event of the input like so:

handleChange = (e) => {

  this.setState({

    band: e.currentTarget.value

  });

  // console.log("state", this.state); This will have unexpected results. Try to investigate why.

};

Also remove the call to handleChange in componentDidMount

You are actually missing this binding your function in your constructor.

constructor(props) {

    super(props);

    this.getBand = this.getBand.bind(this);

    this.state = {

      band: "",

      events: 

    };

  }

Here is the demo of that: https://stackblitz.com/edit/react-hfkqaw?file=index.js

This is from react

You have to be careful about the meaning of this in JSX callbacks. In
JavaScript, class methods are not bound by default. If you forget to
bind this.handleClick and pass it to onClick, this will be undefined
when the function is actually called.

full reading here: https://reactjs.org/docs/handling-events.html