🏋️ Lifted some states up!! - Day 1 Log

#react #javascript

Well, I forgot to create a GitHub repo for my personalized learning journey. I should definitely create one by the end of the day.

I’m excited to write today about my progress. But before that — Palash Shrote , thanks for reading my rant. I wasn’t expecting anyone to read it (especially on Day 1), but you made my day and lit a little fire under my butt to keep going. That’s why I’m here writing my Day 1 log at 2:19 AM. Really, thank you.

Honestly, the day was quite hectic. Living with your parents does come at a cost. That cost? I pay it by being the “Chotu” of the family. And seeing my discipline, dedication, and devotion, my family has promoted me to “Chotu-cum-Driver.” I take them anywhere, anytime — wherever they want to go. The service is 24×7×365. 👍

Meanwhile, today I tried building small features where I could use state management heavily in React.

States do mess with your head when they grow in number. I find it a little tricky to pass them through props when an application involves multiple components.

Right now, I’m trying to build a simple blogging app where we can add new posts. Not much has been done so far — just using states to manage different components, with props acting as a linker between them.

All of this is my revision set for React, as I haven’t coded seriously for a long time. I did a client project in February, but I still felt the need to revise everything before jumping back in. From mid-Feb till yesterday, I hadn’t touched my coding console. So, I decided to start fresh — and strong.

No matter how many times you revise or redo something, you always learn something new.

React has done a huge favor for the developer community by wrapping lengthy vanilla JS scripts into hooks, props, and whatnot.
If you’ve got a good command over vanilla JS, working with React becomes fun.

A simple example to demonstrate:

Let’s render a list of items and handle click events in both vanilla JS and React.

1. Vanilla JS

// Assume you have a <div id="app"></div> in your HTML

const app = document.getElementById('app');

// Data
const items = ['Apple', 'Banana', 'Cherry'];

// Render list
const list = document.createElement('ul');
items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  li.addEventListener('click', () => {
    alert(`You clicked: ${item}`);
  });
  list.appendChild(li);
});
app.appendChild(list);

2. React

import React from 'react';
import { createRoot } from 'react-dom/client';

const items = ['Apple', 'Banana', 'Cherry'];

function App() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index} onClick={() => alert(`You clicked: ${item}`)}>
          {item}
        </li>
      ))}
    </ul>
  );
}

const root = createRoot(document.getElementById('app'));
root.render(<App />);

Which code do you find more readable?

In vanilla JS, event listeners are added individually to each element, while React makes event handling concise and inline.

Now, predict the output of the coding problem below. ok?? Cool.
Let’s make some use of your grey matter.

import Post from './Post'
import NewPost from './NewPost'
import classes from './PostList.module.css'
import {useState} from 'react'
import Modal from './Modal'

export default function PostList({isPosting, onStopPosting}){
  const [enterBody, setEnterBody] = useState('');
  const [enterName, setEnterName] = useState('');

  function enterBodyHandler(){
    setEnterBody(event.target.value);
  }

  function enterNameHandler(){
    setEnterName(event.target.value)
  }

  return(
    <>
      {isPosting ?   
      <Modal onClose={onStopPosting}>
       <NewPost onChangeBodyHandler={enterBodyHandler} onChangeNameHandler={enterNameHandler}/>
      </Modal> : null 
      }

      <ul className={classes.posts}>
        <Post author={enterName} body={enterBody}/>
        <Post author="Manuel" body="Check out the full course!" />
      </ul>
    </>
  )
}

Your task is to figure out whether the function enterBodyHandler() and function enterNameHandler() will work correctly or throw error?

Try doing it yourself and do come up with good explanation.

Earlier, I was thinking of writing the explanation in the same post. But my smarty pants self convinced me to wait and post the explanation in the tomorrow’s blog. So, stay tuned.

Abhay Raj, signing out.
📅 June 1, 2025

DEV Community

🏋️ Lifted some states up!! - Day 1 Log

A simple example to demonstrate:

Top comments (0)