Tahuana's assignment

[tahuana]

Task 1: basic + stretch goals
Task 2: basic goal

[jocelynjeffrey]

You don't need this constructor

[jocelynjeffrey]

You can also make this stateless! (see my comment on your error component)

[jocelynjeffrey]

Same with this constructor! You don't need this :)

[jocelynjeffrey]

nice!

[jocelynjeffrey]

since you're not manipulating state or using any of the lifecycle hooks, you can make this a stateless component. Rather than extending the Component class, you can do something like this:

export const Error = (props) =>
    <div>
    {
        console.log("estou no erro")
    }

        <p>Ops... we got an error: {props.message}</p>
    </div>

export default Error;

You can try doing the same with your recipe component as well!

[timestep]

Consider pulling this function outside of the scope of componentDidMount

Something like this

 componentDidMount() {
  this.fetchRescipe()
}
fetchRecipes = () => <your fancy code here>

[tahuana]

Done:

• refactored based on TA comments
• Task 2: double stretch goal - created a higher order component that conditionally show either an error or a list
• Task 3: stretch goal - created a reusable function that if given a string, will search the api for that string
• Task 4: double stretch goal - implemented a search bar

[jocelynjeffrey]

It looks like you've got the concepts of a HOC down! Nice work 😄 - this is a really complicated concept!

One thing you could do to make this more generic is pass your props directly to your pass and fail components instead of manipulating the props here, similar to this:

const branch = (test, ComponentOnPass, ComponentOnFail) => props => 
test 
? < ComponentOnPass data={props} />
: <ComponentOnFail data={props} />

Then you can use the data however you'd like within the component itself, which means you could pass any components to your branch component and reuse your branch component multiple times.

One other thing to double check is that you're passing your parameters into your HOC in the order you expect them - when you call this on line 67 you're passing 1) your condition, 2) your success component (Recipe) and 3) your fail component (Error). Here, you're rendering your Error component as the success component (which I think is is what you actually want to render, since you're checking for hasError). It could be worth renaming your test boolean something like passCondition or similar so it's clear that the first returned component is the one you want rendered if your condition is true. And if you want your Recipe component to show with the success of your condition, you could change your boolean to !this.state.hasError.

Excellent work with Higher Order Components!