DEV Community: marthaeochoa

React information flow.

marthaeochoa — Mon, 06 Mar 2023 18:18:22 +0000

So we know to pass information from a parent down to a child we use props. Well, as it turns out, to do the opposite: it is NOT that simple.

So how can we send information from a child component to its parent component? You would only need to pass information from a child to a parent component when something happening in the child component directly affects the parent. Take a delete button for example. A delete button that removes something from the application.

The way we would handle this is by creating a callback function in the parent component and passing it down to the child as a prop.
In my application, I needed to make a delete button functional, but the delete button lives in a nested child component.

So I have app

function app () {
 const [projects, setProjects] = useState([]);
return (
<ProjectList projects={projects} />
)
}

And ProjectList which returns all the projects I want to display in my application (with props passed down by app).

function ProjectList ({ projects}) {

    return projects.map(project => {
        return (
        <ProjectItem 
        key={project.id} 
        project={project} 
        />
     )
    })
};

return (
          <section>
            <table>
            <tr>
                    <td><h3>Title</h3></td>
                    <td><h3>Description</h3></td>
             </tr>
             {renderProjects(projects)}
            </table>
        </section>
)
}

I created a table to better fit my layout, but as you can see, I created a seperate component to take care of each individual Project in my list of projects. That component looks like this:

function ProjectItem({ project }) {

    const { id, title, description } = project 

    return(
       <tr>
        <td>{title}</td>
        <td>{description}</td>
        <td className="delete-button">
            <button className="delete-button"> x </button>
        </td>
        </tr>
    )
}

So in order to make my delete button functional, I need to get the click to reach all the way to the app component since Projects state lives in app. The app component displays ProjectList and ProjectList needs ProjectListItem in order to display each project. So let's create the call back function.

function app () {
const [projects, setProjects] = useState([]);

  function onProjectDelete (projectId) {
    setProjects(projects => projects.filter(Project => Project.id !== projectId))
};

return (
<ProjectList projects={projects} onProjectDelete={onProjectDelete} />
)
}

Then accept it in our ProjectList component and pass it down to our ProjectItem component.

function ProjectList ({ projects, onProjectDelete }) {

    return projects.map(project => {
        return (
        <ProjectItem 
        key={project.id} 
        project={project} 
        onProjectDelete={onProjectDelete}
        />
     )
    })
};
.......

Now we accept it in our ProjectItem component. We now must create a function that will take in onProjectDelete and be handled by the onClick event.

function ProjectItem({ project, onProjectDelete }) {

    const { id, title, description } = project 

    function handleDelete () {
        onProjectDelete(id);
    }

    return(
       <tr>
        <td>{title}</td>
        <td>{description}</td>
        <td className="delete-button">
            <button className="delete-button" onClick={handleDelete}> x </button>
        </td>
        </tr>
    )
}

And there we have sucessfully created a way to connect the information happening in ProjectItem all the way back up to state in the App component.

The Dreaded Phase 1 Assessment

marthaeochoa — Wed, 21 Dec 2022 21:29:03 +0000

If you're just starting out phase 1, or you're almost done and you're getting ready for your phase 1 assessment, then I'm sure you are dreading it.
From the moment I started this program I was so scared of this assessment because I think we are naturally afraid of the unknown. So I will be sharing some tips on how to prepare yourself for this assessment.

Prepare Technically

If you're asynchronous, it is so important you pace yourself and take time to actually understand what you're reading and understanding the "why's" of the labs you're working on. It is also super important to study and touch up on topics you probably didn't even look twice at since completing. STUDY! Don't try to cram because I promise you will forget something. Take time each day to study a little bit and look back on previous topics.

Prepare Mentally

The first thing the instructor asked me was "How are you?" to which I replied, "Oh, I am so nervous". She then told me something that soothed my nerves a little bit and that was "This isn't like a normal school test, this is kind of like a mock interview."
Now, I am great at interview, but I still did not know what a technical interview would look like. So let me tell you what this one might look like:
Have your project already running. You don't want to waste time and take time away from your live coding.
You will want to also have your project GitHub repo open.
You will walk through your code, the instructor may ask any questions they like about your code and ask for you to name or point out certain things e.g(callback functions, "what does this code do", "what is this section called").
After this, you will do the live coding. The instructors are there to guide you, they don't just silently sit there and watch you code so don't make them sit and watch you silently code. It's not a who-can-talk-less contest. Talk through your code, talk through what you're doing. Your instructor might say little words of encouragement or even "okay try it" to guide you the right way. They want you to pass, they just have to know what you're thinking in order to help you pass.
Get help from your cohorts, we honestly are in this together, and once we realize that, the better. We all want to make it, and by working together you ensure each other's success and already made connections with people in the same field as you.

This assessment is nothing to cry about nor is it something to be afraid of, I know that now.

My Problem with Asynchronous Code

marthaeochoa — Wed, 07 Dec 2022 20:20:07 +0000

When working on my simple application, one thing I kept forgetting about and continued to struggle with was asynchronous code and the things I could and couldn't do with it.
I struggled to find a reason as to why my buttons were not working the way they should have been. Forget working, the buttons were not even active! It was as if I was trying to call a button that did not exist...
I grew frustrated, and one thing I should have done earlier was ask for help, because once I recevied help, I realized that my problem had such a simple fix; If I had only remembered asynchronous code.

You see, I got so used to synchronous coding and how with that, its so easy. If it's on the page, it exists. With synchronous coding, your code runs line by line, top to bottom.
So for example...

const puppies = "Thor and Hela"
console.log(puppies)
// Thor and Hela

Here we are able to get back the result because the code is synchronous.
But, what I was trying to do was call "puppies" in a place where "puppies" was not real yet.

My real example consisted of using fetches. In my application, I created a GET fetch in order to obtain information from a db.json file. Once I did that, I created HTML elements for the information I received to be rendered on to my application. This included an < h2 >, < div >, two < p >, and a < button >. Like so..

function renderData(data){
let data = document.createElement('li')
data.innerHTML = `
<div id="content">
    <h2>${data.firstValue}</h2>
    <p>Second Value: ${data.secondValue} </p>
    <p>Third Value: ${data.thirdValue}</p>
    </div>
    <div class="button">
    <button>Click!</button>
    </div>
    `
document.querySelector('#data-list').appendChild(data)
}

This alone, worked perfectly! It displayed all the information on my page! Great!! Now all I needed was to get that button to click! So how about adding an event listener? Sounds good, right?

  <button>Click!</button>
    </div>
    `
document.querySelector('#data-list').appendChild(data)
}

const button = document.getElementsByClassName("button")
button.addEventListener("Click", ()=>{
alert('You clicked me!')
}

Great! What could possibly go wrong?

Okay, in this moment I felt like Javascript made a mistake! In all it's time being a reliable coding language, it made its first mistake with me. Little did I know that the one that made the mistake was actually me, and not the very reliable coding language. I was shocked! It took me a long time and a lot of stress to finally have the courage to ask a cohort
"Can you take a look at my code and see if there's something wrong here?"
Let me tell you, he took one look at my code and immediately said
"Oh, I see what you did"
I was so embarrassed, but he was so helpful and he helped me see the error of my ways. Not by telling me "hey you shouldn't have done this, you should've done this instead" but by saying "How comfortable are you with asynchronous code?" He then walked me through what he meant and helped me debug some things before I came to my own realization of what I had to do. The answer was so simple.

Because I created the button tag as a result of my GET request, the button doesn't technically exist to the rest of my code. The button tag only exists within the renderData function. In order for my event listener to be able to listen for a button, is by having it listen to the button where the button lives.
Turning my code into this:

function renderData(data){
let data = document.createElement('li')
data.innerHTML = `
<div id="content">
    <h2>${data.firstValue}</h2>
    <p>Second Value: ${data.secondValue} </p>
    <p>Third Value: ${data.thirdValue}</p>
    </div>
    <div class="button">
    <button>Click!</button>
    </div>
    `
document.querySelector('#data-list').appendChild(data)

 const button = document.getElementsByClassName("button")
 button.addEventListener("Click", ()=>{
 alert('You clicked me!')
 }
}

Once I moved the event listener to inside the renderData function, I was then able to successfully grab the button and add an event listener to it. If I tried to call that event listener anywhere else, it simply would not be able to grab that button.. no matter how many times you try it out in the console...

The fact that the renderData function was only activated by the GET request promise, is what makes that function asynchrounous. It doesn't run in order in which it is written. It won't run until the GET request is complete. Therefore, the button doesn't exist outside of that function.

This experience helped me understand asynchrounous code a little better, don't get me wrong, it is still a complicated concept. You just need to experience that error in order to open your eyes and see what asynchronous code actually looks like.