Code Review

[josemussa]

No description provided.

[josemussa]

For more readability we can place body and html rules on top of your main css file, since it's kind of the 1st/principal rule.

[josemussa]

When you're not using any lifecycle methods, ie. componentDidMount constructor, or your component is stateless, there's no need to write it using the class syntax, this is because react will render the return of any pure function.

So we can rewrite this as follows:

import React from 'react' // Note that we're not importing Component anymore, since it's not needed.

cosnt App = () => (
  <div className="App">
     ...
   </div>
);

export default App;

[josemussa]

We can test the App component using snapshots.

import React from 'react';
import App from './App';
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  const appWrapper = renderer
    .create(<App />)
    .toJSON();
  expect(appWrapper).toMatchSnapshot();
});

[josemussa]

👍

[josemussa]

When building a real app you'll need to do a lot of API calls, writing this code multiple times seems kinda wrong, I recommend you to create a utility function to wrap this and pass the url as an argument:

export const apiFetcher = (url) => fetch(url, { header: { Authorization: `Bearer ${process.env.REACT_APP_YELP_API_KEY}` }});

Then on your component you can do

import { apiFetcher } from './utils/apiFetcher';

// And you use it as

fetchEvents = (nextProps) => {
  apiFetcher('https://cors-blablabla').then(...)
} 

[josemussa]

When using ES6 as you're doing, you don't need to specify the key of an object if the const has the same name.

this.setState({ place }) // equals: { place: valueOfPlaceVariable }

[josemussa]

You can deconstruct the state to have more readibility.

const { place } = state;

<img src={place.card_photo} classNa... />

[josemussa]

Always add PropTypes to your components https://reactjs.org/docs/typechecking-with-proptypes.html

[josemussa]

PlaceCard.propTypes = {
  id: PropTypes.number,
  name. PropTypes.string,
}

[josemussa]

You can try out placing all this values on an array and mapping them.

const categories = ['sightseeing', 'discovering'];

// Then on your render method

<select>
  {categories.map(category => <option value={category}>upperFirst(category)</option>)}
</select>

https://lodash.com/docs/4.17.5#upperFirst

[josemussa]

No need for this else