Bdtjtk

I am following this tutorial [a link] (https://github.com/btholt/complete-intro-to-react-v4/ ) from the front end masters course. I had my code initially working locally but when I uploaded my code to github and tried to rerun it from the repo clone I got the dreaded " Support for the experimental syntax 'classProperties' isn't currently enabled (30:24):" Error.

React apparently doesn't support the syntax that was done in the tutorial so I re-wrote all the "handle" functions in the appropriate syntax.

I ended up fixing most of the issues except a createContext issue. The consumer child descendant is loosing the the context and I'm not sure how to access the props from input and select value in order to update the state for the API Call. I am getting a "Cannot read property 'setState' of undefined error". When the input or select is triggered. After hours of debugging this is the last bug! Does anyone have any insight on what possibly be going on? I rather use the appropriate functions calls rather than the experimental arrow functions.

Here is the SearchContext.js file;

import React from "react";



const SearchContext = React.createContext({

  location: "San Jose, CA",

  animal: "",

  breed: "",

  breeds: ,

  handleAnimalChange() {},

  handleBreedChange() {},

  handleLocationChange() {},

  handleResetForm() {},

  getBreeds() {}

});



export const Provider = SearchContext.Provider;

export const Consumer = SearchContext.Consumer;

And here is the SearchBox.js consuming the context.

import React from "react";

import { ANIMALS } from "petfinder-client";

import { Consumer } from "./SearchContext";



class Search extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      // Consumer = SearchContext.Consumer

    };

  }

  // static context = context;



  handleFormSubmit() {

    event.preventDefault();

    this.props.search();

  }



  // componentDidMount() {

  //   let context = this.context;

  //   /* perform a side-effect at mount using the value of MyContext */

  // }



  render() {

    return (

      <Consumer>

        {context => (

          <div className="search-params">

            <form onSubmit={this.handleFormSubmit}>

              <label htmlFor="location">

                <span aria-label="search" role="img">

                  Location

                </span>

                <input

                  id="location"

                  onChange={context.handleLocationChange}

                  value={context.location}

                />

              </label>

              <label htmlFor="animal">

                <span aria-label="search" role="img">

                  Animal 🐶

                </span>

                <select

                  id="animal"

                  value={context.animal}

                  onChange={context.handleAnimalChange}

                  onBlur={context.handleAnimalChange}

                >

                  <option />

                  {ANIMALS.map(animal => (

                    <option key={animal} value={animal}>

                      {animal}

                    </option>

                  ))}

                </select>

              </label>

              <label htmlFor="breed">

                Breed

                <select

                  // disabled={!context.breeds.length}

                  id="breed"

                  value={context.breed}

                  onChange={context.handleBreedChange}

                  onBlur={context.handleBreedChange}

                >

                  <option />

                  {context.breeds.map(breed => (

                    <option key={breed} value={breed}>

                      {breed}

                    </option>

                  ))}

                </select>

              </label>

              <button>Submit</button>

              <button onClick={context.handleResetForm}>Reset</button>

            </form>

          </div>

        )}

      </Consumer>

    );

  }

}



export default Search;

Here is the App.js to understand where the data is coming from:

import React from "react";

import ReactDOM from "react-dom";

import { Router, Link } from "@reach/router";

import pf from "petfinder-client";

import Results from "./Results";

import Details from "./Details";

import SearchParams from "./SearchParams";

import { Provider } from "./SearchContext";



const petfinder = pf({

  key: process.env.API_KEY,

  secret: process.env.API_SECRET

});



class App extends React.Component {

  constructor(props) {

    super(props);



    this.state = {

      location: "",

      // location: "San Francisco, CA",

      animal: "",

      breed: "",

      breeds: ,

      handleAnimalChange: this.handleAnimalChange,

      handleBreedChange: this.handleBreedChange,

      handleLocationChange: this.handleLocationChange,

      handleResetForm: this.handleResetForm,

      getBreeds: this.getBreeds

    };

    this.handleAnimalChange = this.handleAnimalChange.bind(this);

    this.handleBreedChange = this.handleBreedChange.bind(this);

    this.handleLocationChange = this.handleLocationChange.bind(this);

    this.handleResetForm = this.handleResetForm.bind(this);

    this.getBreeds = this.getBreeds.bind(this);

  }

  handleLocationChange(event) {

    this.setState({

      location: event.target.value

    });

  }

  handleAnimalChange(event) {

    console.log(event);

    this.setState(

      {

        animal: event.target.value

      },

      this.getBreeds

    );

  }

  handleBreedChange(event) {

    this.setState({

      breed: event.target.value

    });

  }

  handleResetForm() {

    this.setState({

      location: "",

      animal: "",

      breed: "",

      breeds: 

    });

  }

  getBreeds() {

    if (this.state.animal) {

      petfinder.breed

        .list({ animal: this.state.animal })

        .then(data => {

          if (

            data.petfinder &&

            data.petfinder.breeds &&

            Array.isArray(data.petfinder.breeds.breed)

          ) {

            this.setState({

              breeds: data.petfinder.breeds.breed

            });

          } else {

            this.setState({ breeds:  });

          }

        })

        .catch(console.error);

    } else {

      this.setState({

        breeds: 

      });

    }

  }

  render() {

    return (

      <div className="main-content">

        <header>

          <Link className="item" to="/" data-aos="fade-down">

            {"React PetFinder 🐱 "}

          </Link>

        </header>

        <Provider value={this.state}>

          <Router>

            <Results path="/" />

            <Details path="/details/:id" />

            <SearchParams path="/search-params" />

          </Router>

        </Provider>

      </div>

    );

  }

}



ReactDOM.render(<App />, document.getElementById("root"));

1) Did you start with the master branch? https://github.com/btholt/complete-intro-to-react-v4

2) Did you reference the walkthrough here? https://btholt.github.io/complete-intro-to-react-v4/context

Solution code commits:
- Step #7 https://github.com/btholt/complete-intro-to-react-v4/commit/c0da3625726882dabc28255a3527f0170f31a9d7
- Step #8 https://github.com/btholt/complete-intro-to-react-v4/commit/9311c6076a41f350b9ad45f9bfa8528c1a8b81d0

3) "Support for the experimental syntax 'classProperties' isn't currently enabled"
This is a babel error. Brian covers adding a .babelrc file here: https://btholt.github.io/complete-intro-to-react-v4/async-and-events-in-react
... here's his babelrc file: https://github.com/btholt/complete-intro-to-react-v4/blob/master/.babelrc