Learning to code with AI: ZPD and scaffolding to learn more about strings in React.

I’ve discovered that the key to successfully leveraging AI is in the prompt—the way you ask the right questions to guide your learning. This has been instrumental in my journey with React, where I’ve applied educational psychology concepts like scaffolding and Zone of Proximal Development (ZPD) to push my skills further.

While I’ve been working with arrays and using methods like .map(), I realized that understanding these methods deeply requires more than just answers—I needed the challenge. That’s where this series, “Learning to Code with AI,” comes in.

I recently faced a challenge: I wanted to filter an array of words in real time as I typed into a form. I could use .filter(), but I wanted to understand its use in context, without going to Stack Overflow.

***So, my First prompt was: "I already have the state and the form, i just need to filter the words, using the form, by typing every single word, and filter realtime, can you help me with enough questions in an interactive way by pausing and waiting for each answer, and scaffold this interaction using Zone of Proximal Development to achieve the goal? for example so far i know i must use .filter..."

(----) The first ChatGPT's response:

Let's scaffold this interaction step by step. You're on the right track with using `.filter` to achieve the real-time filtering.

First Question (Theory):

Why do we need the `.filter` method in this scenario, and what is its purpose in a React app when handling lists?

You mentioned you're familiar with `.filter`, so tell me why it works for this use case.

(****)Then my Second prompt was: "Good first start with this interaction. Well, i think that if i already have the words mapped from the array of words, i then, can use the filter method of this array mapped. Concatenate both methods should be the way to go, i think i need just to pass real time each word within the syntax of the filter method, is that correct?"

(----) The second ChatGPT's response:

Yes, that's correct! You are right about needing to filter the mapped array. The `.filter()` method is perfect for filtering out elements based on a condition, and in this case, it will check if the input matches the words in the array.

Next Step:

You want to filter the words in real-time as you type in the input. The logic should check if the input value (stored in `searchWord`) is found in any of the words from the array.

Now, can you guess what condition should be inside the `.filter()` function to match the typed input (`searchWord`) with each word in the array?

(****)Then my Third prompt was: "i know that if i want to filter numbers, i need to use this syntax: numbers.filter(num => num > 3); maybe i could use before the words.filter(letter => letter === searchWord).map and then the other code?"

(----) The third ChatGPT's response:

You're on the right track! However, since you're dealing with strings, we need to check if each word **includes** the `searchWord`, not if it's **strictly equal** (because you may want to filter words that start with or include a sequence of letters).

In this case, you could use the `.includes()` method within the `.filter()`.

Here's how you can structure it:

```javascript

spreadWords.filter(word => word.includes(searchWord)).map((filteredWord, index) => (

))

```

This way, you check if the word includes the typed `searchWord` and then map over the filtered words.

Question:

Do you know how to handle case sensitivity, so users can type in lowercase or uppercase and still match the words?

(----) End of ChatGPT session:

TL;DR: try to ask ChatGPT to scaffold and use ZPD in an interactive way to truly make the chat constructive, and learn from it. Hint: Imagine a SaaS with embedded scaffolding and ZPD to optimize learning!

RT;WT (Read This; Worth the Time"):

This interactive learning was exactly what I needed. I knew .filter() worked, but I needed a deeper understanding.

Eventually, with this back-and-forth, I achieved my goal even with my B2 English level. I understood how to filter strings dynamically, all thanks to a scaffolded approach where ChatGPT led me through thought-provoking questions rather than handing me the solution outright. I'm also improving my English.

My Key Takeaway: If you want to grow with AI, use it not just to get answers but to challenge your learning process.

Why This Approach?

Interactive, scaffolded learning has been a game-changer for me in coding. Whether you’re learning React or any other tech, try incorporating this method. By having AI guide the process, I’m constantly engaged, learning concepts thoroughly, and pushing past plateaus.

Have a great day, and keep challenging yourself!

Here are some APA references related to scaffolding, ZPD, and educational theories:

1. Vygotsky, L. S. (1978). Mind in society: The development of higher psychological processes. Harvard University Press.

2. Wood, D., Bruner, J. S., & Ross, G. (1976). The role of tutoring in problem-solving. Journal of Child Psychology and Psychiatry, 17(2), 89-100.

3. Mayer, R. E. (2004). Should there be a three-strikes rule against pure discovery learning? The case for guided methods of instruction. American Psychologist, 59(1), 14–19.

4. Bruner, J. S. (1961). The act of discovery. Harvard Educational Review, 31(1), 21-32.

3 comments