How to problem solve effectively when you're stuck on projects (not knowing how and what to code)

Web Development Full-Stack
1

Hi everyone,

Apologies for the long-winded question. I’m looking for a bit of advice and expertise on how to tackle project-based learning and what to do if you’re stuck and don’t know how to piece everything together.

I have recently started the React project ‘Jammming’ and have become stuck on the step ‘Implement Playlists in the Component Tree’. Instructions for this open-ended requirement are as follows:

Your Jammming web app should allow the user to customize their playlist title and tracks. When a user creates a playlist, your app should display the playlist name and tracks from the playlist.

Create a unidirectional data flow from your root component to relevant children components. This data flow should pass down the playlist name and tracks.
Things to keep in mind:

  • You can create a mock string containing the playlist name and tracks to test your code.
  • If you’ve set up your static components with the proper representation for the core components of the interface, you can pass the playlist tracks from the component responsible for the Playlist to the component responsible for the Tracklist.
  • Consider using state to store information such as the playlist name and playlist tracks.

I would like to tackle this myself without viewing any tutorials, source code, etc., as I know that good developers do not rely on memory of syntax but on how they are able to solve problems. However, this really threw me off balance, as I have no idea how to piece this together.

Firstly, I googled how to create a unidirectional data flow and found out how I could do this. However, I had no idea how to implement this, and the technical wording of the instructions slightly confused me. In the end, I’ve just been googling question after question and getting slightly stuck in the mud, and I find it a bit inefficient.

Should I carry on this way and eventually learn through trial and error, or is it ok at this point to seek some guidance through tutorials, source code, etc.?

Any advice on a proven path or method for project-based learning would be highly appreciated!

1 Like
2

I totally understand the frustration w/getting stuck and not knowing how to proceed.

Not specific to React, but to learning any programming language in general—knowing how to research information that’s helpful is part of problem solving and a learned skill in itself (you didn’t ask, but I will say this: resorting to CGPT is not learning by any means). You’re on the right track. There’s also no shame in going back over any lessons that cover the skills necessary to complete the projects. I would recommend not rushing through lessons, make sure you understand concepts presented before moving forward.

As you become more proficient and concepts become more solidified, you’ll stop and realize, ‘hey, I didn’t know that before and now I do!’ It takes practice & time. It sounds simple, but trial and error is how we learn. Get rid of all the assumptions you have about how “good developers” operate or how anyone else learns. Everyone is different and learns concepts at a different pace; no one way is better than another. You have to do what’s best for you. You’ll get there.

2 Likes
3

This is great advice. Thanks so much for your help! Like you said, it takes time, and I want to be as confident as possible, so I will take my time and revisit the lessons required to complete the projects. Based on my initial question, should I revisit props, state, and react patterns for this particular one and go from there?

Do you think pair programming is a good option when the next opportunity arises?

Thanks again for your help. It’s much appreciated!

1 Like
4

I’m sorry, but I don’t know JS or React. That would be for someone skilled in that. Maybe @staledata could share their thoughts? :slight_smile:

Sure, it could help. There are always people looking for study & project partners here, or over on the Discord server.

Also, search here in the forums, as there’s lots of discussions about the project and you might find something useful there too.

2 Likes
5

The task where you’re stuck in the Jammming app – updating and displaying the playlist name and tracks – is just about what you’ve mentioned: state management and passing props. These two are React cores and there are many lessons about these tasks that are less complex, have denser instructions and are therefore easier to fulfill and understand than the Jammming app. Repeating these lessons and projects would definitively be helpful.
I think there is a project called Copy Cat which is very basic and lightweight and tackles props and state. Maybe you could redo that.
I would recommend resetting the whole Components interacting and hooks chapters and doing them again, including the project passing thoughts at the end of the hooks chapter. If you’re new to React, going through the React lessons more than once to solidify what you’ve learnt is very helpful.

3 Likes
6

My own solution to this requires a lot of extra work, but it is the only repeatable method I have in my toolkit for the generic type of problem you are describing:

In the face of challenging adversity, I create a separate standalone practice project that has me utlizing just the step I am really struggling with.

In your case, you could start hacking on a separate project that has you focusing on just that concept of unidirectional data flow from parent component to child components. You don’t need to complete anything fancy, just practice with the idea until you’ve worked it out better and then go back to your big project and try to transfer your knowledge to the task you were blocked on.

Tips for the specific problem you are facing:

  • Look back in the React lessons on codecademy for the part where it showed state flowing from a parent componet to the child component (hint: I think the section about props will be useful. Haven't quite gotten to this project myself yet; almost there)
  • Use MDN, Google, and/or Stackoverflow to look up the topic of React props
  • Consider completing this project using external resources and instead challenge yourself after the Spotify project to do an additional self-guided project covering the same or similar topics without using external resources.
1 Like
7

Great advice! Thanks so much! I think the lesson I’ve gathered is to just practice and maybe take yourself one step back to go two steps forward. All the best with your coding journey!!

8

This sounds like a great plan of action. I will start this and go from there. Thanks :slight_smile:

1 Like
10

Not sure I understand correctly: You want to define a function in the parent component, envoke it in the child component and then work with its return value in the parent component, am I right?
That is possible:

Parent

function ParentComp() {
  const [num, setNum] = useState(0)
  const func = (value) => {
    setNum(prev => prev + value)
  }
  return (<div>
       <p>Sum is: {num}</p>
       <ChildComp fn={func}/>
    </div>)
}

Child

export function ChildComp({fn}) {
  return (<div>
    <button onClick={() => {fn(1)}}>Add 1!</button>
    <button onClick={() => {fn(2)}}>Add 2!</button>
   </div>)
}
1 Like
11

Apologies, i confused myself slightly in the previous question. What i’m trying to find out comes from step 4 of the Passing Thoughts project. In the previous step you create a function called addThought and pass that using props on the addThoughtForm component in App.js. This i can understand.

in step 4, in addThoughtForm.js you create an event handler function called handleTextChange, which you pass with an onChange event in the same file. I will re-visit the props lessons again, but i do not understand this as i thought props passes data from parent to child components.

e.g App.js has passed props to AddThoughtForms.js by injecting a property into the AddThoughtForm component in App.js.

Thanks.

12

I’m not assigned anymore, so I don’t know what step 4 asks you to do exactly, but I have that project locally. What I see there is very much the same as what I do in the example above.
addThought is passed as props to AddThoughtForm the same way as func is passed as props to ChildComp in the above example.
Then in my PassingThoughts project, a handleSubmit function is defined that calls the function addThought which was passed as props. That is the same what I do in the example above: I call the function fn that was passed as props in the child component. The only difference is that I directly call it on the button and destructure the props in the parameter. I wouldn’t have to change my example very much for it to be exactly the same as PassingThoughts:

Child

export function ChildComp(props) {
  const handleClick = (num) => {
    props.fn(num)
  }
  return (<div>
    <button onClick={() => {handleClick(1)}}>Add 1!</button>
    <button onClick={() => {handleClick(2)}}>Add 2!</button>
   </div>)
}

If you don’t need to pass different arguments to handleClick you could assign handleClick as a reference to onClick as in PassingThoughts:

export function ChildComp(props) {
  const handleClick = () => {
    props.fn(1)
  }
  return (<div>
    <button onClick={handleClick}>Add 1!</button>
   </div>)
}

Now it is very much the same as in the PassingThoughts projects.

1 Like