Ravenous project

Hi everybody

i am trying to do the ravenous project (this is not authorization-form project but i couldn’t find the ravenous project in the subtitles) part 2 and i get the following error message:


i even downloaded the solution and made comparison between Business js files and they are exactly the same.
this is the Business js code:

import React from 'react';
import './Business.css';


class Business extends React.Component{
	render(){
	return (<div className="Business">
  <div className="image-container">
    <img src={this.props.business.imageSrc} alt=''/>
  </div>
  <h2>{this.props.buisness.name}</h2>
  <div className="Business-information">
    <div className="Business-address">
      <p>{this.props.business.address}</p>
      <p>{this.props.business.city}</p>
      <p>`${this.props.business.state}${this.props.business.zipCode}`</p>
    </div>
    <div className="Business-reviews">
      <h3>{this.props.business.category.toUpperCase()}</h3>
      <h3 className="rating">`${this.props.business.rating} stars`</h3>
      <p>'${this.props.business.reviewCount} reviews`</p>
    </div>
  </div>
</div>);	

}
}

export default Business;

thanks
Dorit

Hello, @doritfish.

Looks like a small issue above. :wink:

Hi midlindner
thank’s for the replay, unfortunately this is not the problem…
dorit

If it runs, then they’re not exactly the same.
Normally if you want to compare two files or even directories, you would tell a program named diff (most environments that have bash probably also have this program) about them both, diff would then read them both and report any differences - if a single byte is different, it will be found - that’s probably not how you compared when you are saying they’re exactly the same. But that is how you need to be comparing to say that.

Or if they are identical, are the other files identical too?

Or if the solution code doesn’t run either then the problem might be something else entirely, one might then start asking questions like whether it should run at all.

It can sometimes be a really good idea to run a project before writing any code. What should it do when there’s nothing there, did it successfully compile and all that? And then one might add small parts at a time, running after each change and comparing the outcome to expectations.

Could you also post your BusinessList.js code?

sure this is the BusinessList.js:

import React from 'react';
import './BusinessList';
import Business from '../Business/Business';

class BusinessList extends React.Component{
render(){
return (<div className="BusinessList">
  {this.props.businesses.map(business=>{return <Business business={business}/>})}
</div>);
}
}

export default BusinessList;

I suggest commenting out everything in the component so that it’s just an empty component. Run it. Does it run? If yes, start adding things back.

And if it doesn’t run when it’s just an empty component then that still tells you something - that you’d need to look elsewhere.

And then change your code gradually instead, and run it after each change so that you are interacting with it rather than writing lots of code and then things are wrong and you don’t know what to do.

How about App.js as well?

OK:

import React from 'react';
//import logo from './logo.svg';
import './App.css';
import BusinessList from '../BusinessList/BusinessList.js';
import SearchBar from '../SearchBar/SearchBar.js';

let business={
imageSrc: 'https://s3.amazonaws.com/codecademy-content/programs/react/ravenous/pizza.jpg',
  name: 'MarginOtto Pizzeria',
  address: '1010 Paddington Way',
  city: 'Flavortown',
  state: 'NY',
  zipCode: '10101',
  category: 'Italian',
  rating: 4.5,
  reviewCount: 90
}

const businesses=[business,business,business,business,business,business];


function App() {
  return (
<div>
    <SearchBar/>
    <BusinessList businesses={businesses}/>
</div>
  );
}

export default App;

App should be a class. Like the other classes, it should also extend React.Component, and have a render() method. There is also supposed to be a <h1></h1> element inside the <div></div> above the <SearchBar /> component. (The <h1></h1> element won’t cause a problem. It just won’t appear like it does in the examples.)

ok, thanks, i changed it, but it still doesn’t solve the error that i pasted…

The error message is exactly the same?

yes exactly the same error.

I’m feeling ignored. I’ll say it a third time anyway. Because this is still the way to find it.

Problem: your method tries to get a property from null
Proposed strategy for finding where: make your method do nothing, and then slowly add things back

OK, i will try that.
thanks

ok, i am so sorry for that question, i think it was a typing error i typed biusness instead of business.
thanks you for the advice! i will do this the next time before i ask the question.

Better yet, do it regardless of whether things are wrong.

Run the code. Make a change. Run it again. Still ok? Did the change have the desired effect?

You’ll know immediately when and where you make a mistake, and it’s good to see the effect of each thing you write as well.

It also gets you into the habit of observing what happens in your code.

Of course, when you’re more familiar with something there might not be any information that you need to obtain and you’d just keep typing and if something went wrong then you’d be in such control over it that you’d be able to debug it quickly regardless of how large it is.