DEV Community: Amirah Nasihah

Creating Dynamic Lists in React: A Step-by-Step Guide

Amirah Nasihah — Sun, 17 May 2026 14:16:25 +0000

Creating Dynamic Lists in React: A Step-by-Step Guide

Lists in React are similar to lists in JavaScript. They are commonly used to display menus or a list of items on a website. To use lists in React, we need to use a unique key attribute for each item in the list. This is important because it helps React identify which items have been changed, updated or removed.

Hey there friends! It's been a minute since I last posted on this platform, but I'm back and ready to dive into the world of React once again. Let's get started!

To create a list in React, it is best to create a new component specifically for the list. This component will take in the list data through props. Inside the component, we can use the map function to iterate through the list and display each item.

For the sake of simplicity and learning, this article will give a simple example of creating a list of posts, where the key is "id" of the post, and the "title" and "body" of the post is displayed. The final output of the tutorial is shown in an embedded code editor. It's recommended to follow this tutorial and practice it several times to better understand the concepts.

Code Output

You will get this result once you have finished the tutorial.

Getting Started

To begin, you can create react app using the command line or any code editor (e.g., VSCode). You can also directly use the CodeSandbox for an online code editor that is simple to use and allows you to deploy your code.

What Components Needed

First, we need to understand what components are required to display a list of blog posts using React. You will need to create at least the following components:

A component that retrieves the blog post data from a source, a Parent component - (App.js).
A component that renders the list of blog posts, a Child component - (BlogList.js).
A reusable component that can be reused in other parts of the application where you want to display a single blog post, an Inner Child Component - (BlogCard.js).

You can create these components as separate JavaScript files and import them into your main application file, where you can use them to build out the list of blog posts.

Data Retrieving Component

App.js - This component would handle retrieving the blog post data from any source. For the sake of simplicity, we will just have a simple array of objects [{key:value}, {key:value}] and that is the const posts. Inside them, we have the id, title, and body.

We will import the BlogList component into the App component and pass the posts data through props because we want to use the posts data to be displayed in the BlogList.

App.js

import BlogList from "./components/BlogList";

export default function App() {
    const posts = [
        {
            id: 1,
            title: "buildspace web3 demo showcase!",
            body:
                "Last night's buildspace demo day was a blast, as was go-karting around the map on gather.town dressed as a pumpkin. It's a massive web3 display! Over…"
        },
        {
            id: 2,
            title: "ReactJS - Introduction",
            body:
                "What is ReactJS? ➡️declarative, efficient, and flexible JavaScript library for building reusable UI components. ➡️an open-source, component-based…"
        },
        {
            id: 3,
            title: "Build Metaverse with Gather.Town for Free",
            body:
                "Gather.Town Looking for more interactive web-conferencing software like Zoom, but with more fun virtual interactions just like in real life. Then, you…"
        }
    ];

    return (
        <div>
            <BlogList posts={posts} />
        </div>
    );
}

Display the Lists Component

BlogList.js - This component would render the list of blog posts using the data retrieved by the Appcomponent and display all the posts on our screen browser.

Inside the BlogList functional component, it will take props.

import BlogCard from "./BlogCard";

const BlogList = (props) => {
    const content = props.posts.map((post) => {
        return <BlogCard key={post.id} props={post} />;
    });

    return (
        <div>
            <h1>My Posts</h1>
            <div>{content}</div>
        </div>
    );
};

export default BlogList;

This code is a React component named BlogList which maps over an array of blog posts (props.posts) and returns an array of BlogCard components. Each BlogCard component is rendered with a unique key prop (post.id) and passed the whole post data as props (props={post}).

Let's go line-by-line through the code:

import BlogCard from "./BlogCard": This line imports a component called BlogCard from another file called BlogCard.js in the same directory.
const BlogList = (props) => {...}: This line creates a new component called BlogList using a special type of function called an arrow function. This component will receive data from outside the component through its props argument.
const content = props.posts.map((post) => {: This line creates a new constant called content which will contain an array of components created by mapping over the posts array received through props. It maps through an array of posts stored in props and creates a new array of BlogCard components for each post where it will return a component for each post. "Mapping through an array" means iterating/looping over the elements of an array and performing a specific operation on each element.
return <BlogCard key={post.id} props={post} />;: This line returns a new component of type BlogCard for each post in the posts array. The component will receive data through its props argument and will have a key property set to the id of the current post. Remember to use lists in React, we need to have a unique key attribute for each item in the list. Otherwise, a warning will appear.
<div>{content}</div>: This line returns a div element that contains all the BlogCard components created in the previous step. Which embeds the mapped array of BlogCard components into a div element.
<h1>My Posts</h1>: This line displays a header element with the text "My Posts".
<div>...</div>: This line wraps the header and the content div in a parent div.
export default BlogList;: This line exports the BlogList component so that it can be used in other files.

The overall logic of this code is to create a component BlogList that displays a list of blog posts using the BlogCard component. The component receives data about the posts through its props argument, maps over the posts array to create an array of BlogCard components, and displays these components in a div along with a header.

Reusable Component

BlogCard.js - This component would be a reusable component that takes a single blog post as a prop and displays the details of the blog post in a card format. This component can be reused in other parts of the application where you want to display a single blog post.

This component uses destructuring assignment to extract the "id", "title", and "body" properties from the props object.

This component in React is called "BlogCard". It takes in a prop called "props", which contains information about a blog post. The component then uses destructuring assignment to extract the "id", "title", and "body" properties from the props object.

The component then returns a JSX element that displays the post information in a specific format. The id of the post is displayed first, followed by its title, and then its body content.

const BlogCard = ({ props }) => {
    const { id, title, body } = props;

    return (
        <div>
            <h2>
                {id}. {title}
            </h2>
            <p>{body}</p>
        </div>
    );
};

export default BlogCard;

Let's go through line-by-line:

const BlogCard = ({ props }) => {...}: This line creates a new component called BlogCard using an arrow function. This component will receive data from outside the component through its props argument.
const { id, title, body } = props;: This line uses destructuring to extract the id, title, and body properties from the props object.
<h2>{id}. {title}</h2>: This line returns a header element with the id and title properties from the props object.
<p>{body}</p>: This line returns a paragraph element with the body property from the props object.
<div>...</div>: This line wraps the header and paragraph elements in a parent div.
export default BlogCard;: This line exports the BlogCard component so it can be used in other files.

The overall logic of this code is to create a component BlogCard that displays a single blog post. The component receives data about the post through its props argument and displays the post's id, title, and body properties in a header and a paragraph element.

Destructuring

Destructuring is a feature in JavaScript that allows you to extract data from arrays or objects and assign them to variables. The main purpose of destructuring is to make it easier and more convenient to access the properties and values of an object or array.

// First code snippet
const BlogList = (props) => {

// vs

// Second code snippet
const BlogCard = ({ props }) => {

What is the difference between these two? Why are props inside the BlogList not destructured?

The difference between these two code snippets is that in the first code snippet, props is passed to the BlogList component as a single argument, and in the second code snippet, props is destructured from the props object passed to the BlogCard component.

First code snippet - props is an object that contains all of the properties that are passed to the BlogList component. In this case, it is not necessary to destruct the props object, as the code only needs to access one property, posts.
Second code snippet - props is destructured from the props object, allowing for the properties id, title, and body to be accessed directly. This reduces the need to access properties through the props object and makes the code more readable and maintainable.

In short, the difference is in the way that the properties are accessed within the component. The first code snippet accesses the properties through the props object, while the second code snippet accesses the properties directly by destructuring the props object.

Full Code

App.js

import BlogList from "./components/BlogList";

export default function App() {
    const posts = [
        {
            id: 1,
            title: "buildspace web3 demo showcase!",
            body:
                "Last night's buildspace demo day was a blast, as was go-karting around the map on gather.town dressed as a pumpkin. It's a massive web3 display! Over…"
        },
        {
            id: 2,
            title: "ReactJS - Introduction",
            body:
                "What is ReactJS? ➡️declarative, efficient, and flexible JavaScript library for building reusable UI components. ➡️an open-source, component-based…"
        },
        {
            id: 3,
            title: "Build Metaverse with Gather.Town for Free",
            body:
                "Gather.Town Looking for more interactive web-conferencing software like Zoom, but with more fun virtual interactions just like in real life. Then, you…"
        }
    ];

    return (
        <div>
            <BlogList posts={posts} />
        </div>
    );
}

BlogList.js

import BlogCard from "./BlogCard";

const BlogList = (props) => {
    const content = props.posts.map((post) => {
        return <BlogCard key={post.id} props={post} />;
    });

    return (
        <div>
            <h1>My Posts</h1>
            <div>{content}</div>
        </div>
    );
};

export default BlogList;

BlogCard.js

const BlogCard = ({ props }) => {
    const { id, title, body } = props;

    return (
        <div>
            <h2>
                {id}. {title}
            </h2>
            <p>{body}</p>
        </div>
    );
};

export default BlogCard;

👉 Please share my posts with the community at daily.dev / social media by adding the article's URL to the feed. By adding my article's URL to the feed, I can share my insights and knowledge with other tech enthusiasts and contribute to the passionate community.

Cheers✨

Thank you for your continued support and for sticking around even though I've been away for a bit. I've been busy with some exciting projects, but I'm thrilled to be back and writing again!

Dev Retro 2022: My Story of Switching Careers as a Beginner Developer

Amirah Nasihah — Sun, 17 May 2026 14:16:23 +0000

Dev Retro 2022: My Story of Switching Careers as a Beginner Developer

I made the bold move to switch career paths from accounting to coding during the pandemic. Now, a year later, I'm working at a tech company and have made some amazing friends. While I've faced a lot of pressure and seen my friends go on to achieve professional certifications, I've still been struggling with my decision to change careers.

As I look back on my journey in the tech world, I can see all the challenges and accomplishments I've experienced. And I want to share those insights and lessons with all of you through this #DevRetro2022. Get ready for the long wild ride!

Here we go!🏌️

So, I started by learning Python with the goal of improving my accounting skills with data analysis. Along the way, I discovered HTML and CSS and I was immediately hooked on web design.

I spent about two months learning these languages through resources like freeCodeCamp and SoloLearn. I learned about Git and GitHub, especially the part about beautifying my README. Eventually, I realized that I needed to learn JavaScript for more interactive and dynamic web pages, and I started learning it as well.

This Year I Achieved...

Now onto the terrific part, some of the great things I've achieved this year🏆

🔸Accepted Into Software Engineering Course

I was accepted into a free Foundation of Software Engineering course, where I met a group of amazing people who were all trying to switch careers into tech. Most of us had no technical background at all – there was a cinema assistant manager, a nurse, a psychiatrist, and more.

I also learned about useful tools like AWS, Bootstrap, and Git. I even shared my excitement about the course on Twitter and had a lot of people DM me asking for tips on applying and my experience with the program.

After completing the Foundation course, I was offered the opportunity to move on to an advanced course in front-end development. This course has been challenging, but I've learned a lot about complex concepts like programming, networking, and domains. I'm currently building three challenging projects using React. It's been tough balancing this coursework with a full-time job, but it's all worth it.

🔸Featured On Hashnode 🎉

My article got featured on Hashnode for the very first time! I had been writing with the Hashnode community for about a year, and it was such a cool feeling to see one of my articles get picked for the spotlight. It was about how to generate cool, stable diffusion images using a guide I'd put together. This was a huge honour, and it was exciting to see my work being recognized by the community.

Things I learned -- SEO, plotting my articles, how to make my title and article attractive, how to use Canva for an aesthetic look on the cover post, how to increase the article's engagement and more!

🔸Job At Tech Company

I'm excited that I landed a job offer at a start-up tech company! The company's focus is on using AI and Blockchain technology to educate non-technical people and help them learn. I'm currently working as a system engineering intern, which I was initially a bit hesitant about since it's different from what I'm studying or interested in.

However, after talking to a mentor and considering the opportunity as a whole, I realized that this job could provide valuable experience and exposure to the tech industry, as well as new skills and knowledge that could help me achieve my long-term career goals. So, I can't wait to see where this opportunity takes me!

🔸Networking + Cool Events + Epic Stuff

This year, I've attended a number of virtual events that have helped me make valuable connections and grow as a developer. One of the most inspiring events for me was the buildspace N&W Demo Day, where I had the chance to meet other genius developers and learn about Web3. It was an amazing experience that helped me think about my career in a new way. I'm grateful for the opportunities I've had to connect with others in the tech industry.

%[https://www.youtube.com/watch?v=QtCNRO5kh3U]

To Wrap Up!

My journey hasn't just been about achievements – there have been plenty of challenges along the way, too. I also struggled with imposter syndrome and the decision to switch careers in the first place. It can be tough to make such a big change, especially when you're not sure if you're cut out for it. But through it all, I learned to embrace the challenges and keep pushing forward.💪

So, if you're considering making a switch to tech or just starting out as a beginner developer, don't be afraid to take the leap. It can be intimidating, but it's worth it in the end. The tech industry is super diverse - there's something for everyone! Whether you're interested in building software, analyzing data, or designing user experiences, there's a career path for you.

And if you're struggling, remember that you're not alone and that it's okay to ask for help. I hope my journey has inspired you and that you'll join me on this fantastic ride.

Thank-you note!❤️

Just wanted to drop a quick note to say thank you for all your help, support and trust. I couldn't have done it without each one of you! Thanks to my family, friends, Tech community, TalentLabs, Ever AI, Hashnode and many more!

If you enjoyed this, please show some love by liking💖, commenting🤟, and sharing🙌. Your support means a lot and I love reading your thoughts. Thanks for reading!

Happy coding!✨

Prompt 101: Generate Cool Stable Diffusion Images with this Guide

Amirah Nasihah — Sun, 17 May 2026 14:16:22 +0000

Prompt 101: Generate Cool Stable Diffusion Images with this Guide

Hey there, if you have tried using Stable Diffusion and are unsure of how others are able to generate such impressive images, then this is the perfect place for you to learn the secret behind creating impressive images using AI.

You may have generated amazing images using AI and you felt like it was a result of chance. However, there is a technique behind this seemingly random process. It's called prompt engineering, and it's not just magic, it's science!

What is Prompt

Prompt engineering is a technique used to guide AI to generate high-quality and relevant text, and by experimenting with different prompt structures and formats, you can improve the output of your own prompts.

Sure, creating effective prompts for AI may be a challenge, especially for those new to prompt engineering. They may struggle to get the desired results from their AI, causing frustration and disappointment. But the good news is that anyone can learn how to talk to AI and generate impressive images.

Getting Started

I'll use Lexica.art to make things easy. It's a Stable Diffusion search engine that also allows you to quickly and easily generate impressive images using prompts directly on the site.

To create a super duper image using Lexica.art, just follow these simple steps:

Open Lexica.art in your web browser.
On the homepage, click on the 'Generate' button.
You will be presented with a blank canvas where you can input your prompt.
To create your prompt, you can type in natural language (e.g. "a red apple on a white table, an astronaut riding a horse").
In the 'Generate' page, click on the icon next to the prompter and set the guidance scale to 10 and the image size to 864x512.
Click on the 'Generate' button to generate the SD image.
The generated image will be displayed on the page, and when you're happy, you can "Download" it or share it using the options provided.
You can also adjust the other settings on the page to customize the generated image, but we'll leave that for another time.

By following these, you can quickly and easily generate an SD image using Lexica.art.

To generate the best images using AI, it is important to break down the prompt into clear and concise instructions.

Here's the prompt for the above image:

illustration of an astronaut lounging in a tropical resort in space by dan seagrave, spiral clouds falling, highly detailed, surrealism, triadic color scheme, smooth, sharp focus, matte, elegant, dark, gloomy, octane render, 8k, 4k, washed colors, sharp, dramatic lighting, beautiful, post processing, ambient lighting, epic composition

Let’s look at the POV of the prompt formula.

illustration (this is my style choice) of

an astronaut lounging in a tropical resort in space (the thing I want in the image) + by dan seagrave (artist style),

spiral clouds falling (more stuff I want in the image),

and the rest are all details on how I would like the image to look.

Great, now you have everything you need to create some amazing images!

TL;DR: Prompt Formula

TL;DR: Prompt Formula

Art Medium + The actual things you want in the image + Art Styles (could be an artist or an actual style like Anime, ) + Modifications (extra details on how the image should look) ⇒ Good Image.

To generate images that match your imagination, it may take several attempts to get a result you like. Repeat the process a few times using the same prompt before tweaking the prompt or adjusting the settings to make it more specific or detailed.

After trying a few times, you can start to adjust the prompt to create the exact image you want. Practice is key to developing a strong understanding of how AI works and how to use it as an artistic tool.

Generate multiple images using the same prompt to see how the results vary. You may find that the same prompt produces different results each time, so it's worth trying several times to see which image you like best.

Ready to take your image-making skills to the next level? Try experimenting with different prompts and AI tools, like Midjourney, to create some truly stunning images. The possibilities are endless, so get creative and have fun! 🎉

P.S.: I'm using a Hashnode WYSIWYG editor -- called Neptune.

Share This Tutorial

👉 Please share my posts with the community at daily.dev / social media by adding the article's URL to the feed.

By adding my article, I can share my insights and knowledge with other tech enthusiasts and contribute to the passionate community.

Cheers✨

How To Start Generate AI Art For Noob

Amirah Nasihah — Sun, 17 May 2026 14:16:20 +0000

How To Start Generate AI Art For Noob

hey👀, if you're interested in generating AI art but don't know where to start -- this blog post is for you!

I'll cover the top AI-based art website that you need in order to get started, including some helpful resources and tips. 🙌

1️⃣ Lexica search engine

https://lexica.art/

To become proficient at creating AI art, you must first learn how prompts work. What you ask the AI art generator to produce is prompt. Lexica is a website similar to Google that displays AI art as well as the prompts used to produce it. It's a great way to find prompts for your own ideas.

2️⃣ Artbreeder

https://www.artbreeder.com/

There are many websites that offer AI art for beginners, but one of the best is Artbreeder. Artbreeder offers a wide range of options for generating AI art, and the results can be very realistic. The website is easy to use and offers a wide range of tutorials to help you get started.

3️⃣ NightCafe

https://creator.nightcafe.studio/

When you're ready to create higher-quality images for usage or want greater control over the process, try NightCafe. Every day, they provide 5 free credits that you may use. If you run out of credits, you can purchase more or just wait until the following day to claim more.

4️⃣ OpenAI's DALL-E 2

https://labs.openai.com/

DALL-E is an artificial intelligence program that dazzles with its capacity to transform the text into lifelike pictures. You get 50 free credits for the first month and 15 free credits after that.

5️⃣ Midjourney

https://midjourney.com/

They use the Discord server to generate an image using AI. Midjourney allows you to create your first 25 photos for free. But you won't be able to stop at 25! Offering a basic membership with a monthly subscription and a higher-level standard membership that allows you to generate unlimited images.

6️⃣ Stable Diffusion web demo

https://huggingface.co/spaces/stabilityai/stable-diffusion

Try out the Stable Diffusion online demo above. It functions similarly to Stable Diffusion, but with less adjustability and lower-quality pictures. Since you can make an infinite number of photos, it's fun to experiment with different prompts.

7️⃣ Installing and using Stable Diffusion

https://www.youtube.com/watch?v=pA-njBq1qmM

Installing and running Stable Diffusion on your own machine provides you with the most control and flexibility when creating AI art. You can generate an endless number of images and use custom models and features like Initial Image (img2img). It provides a lot of features and options that can be very helpful for users.

🔥 AI generated Images

👀 Show me what you got!

You've got something cool, let's see it! Click here to show the world and I'd love to check it out.

P.S.: I'll write another post regarding how to Master Diffusion Image Generation with this Comprehensive Guide. Let's connect and follow up with me!

👉 Please share my posts with the community at daily.dev / social media by adding the article's URL to the feed.

By adding my article, I can share my insights and knowledge with other tech enthusiasts and contribute to the passionate community.

Cheers✨

Changing Button's Text using React

Amirah Nasihah — Sun, 17 May 2026 14:16:18 +0000

Changing Button's Text using React

In this tutorial, I am going to give you a step-by-step guide how to change the button text from On to Off while understanding the concepts of conditional rendering in React application.

Conditional Rendering

In React, you often need to display different things depending on different conditions. You can conditionally render JSX using JavaScript syntax like if statements, &&, and ? : operators.

To Start

Code Output

This is the result that you will achieve once you have finished the tutorial. When you clicked the button, the text On will change to Off.

The best practice is to read through this tutorial and follow along several times to have a better knowledge of what you're doing with this concept in React.

Update the Button Text (On to Off)

So, we know that in React, we can create multiple components and we can render the components based on the state of the application.

So, what I'm going to do is to create a new folder named 'components'. And inside the folder, let us have a component file named ButtonControl.js.

Then, we go to that component file and I will have the function ButtonControl. Then, I'm going to export default the ButtonControl component. Like this:

ButtonControl.js

function ButtonControl() {}

export default ButtonControl;

Now, inside the ButtonControl component, I'm going to create two arrow functions.

The first function will be the handleOnClick() function and the second function which will be the handleOffClick() function. We will have it like this:

ButtonControl.js

function ButtonControl() {
 const handleOnClick = () => {};

 const handleOffClick = () => {};
}

export default ButtonControl;

`handleOnClick` And `handleOffClick` Explained

First, let's create a state. So, we have a state and need to import the useState because we want to use the state.

So, I'm going to have the useState, and this useState will be coming from 'react'.

Alright, and now what we are going to do is, in this React state array [], I'm going create a state variable and the name of the state variable will be isClickedOn.

Then, if we want to update this state variable, we will have a function which will be setIsClickedOn. The initial value of this state will be false.

ButtonControl.js

import { useState } from "react";

function ButtonControl() {
 const [isClickedOn, setIsClickedOn] = useState(false);

 const handleOnClick = () => {};
 const handleOffClick = () => {};
}

export default ButtonControl;

Alright, we are done.

And this is what going to happen when you have the handleOnClick and handleOffClick.

What I want is for whenever a user clicked the On button, it will show the Off button. If a user clicked Off, it will show the On button.

And what the ButtonControl component is going to return here is a JSX.

I'm going to create a <div> tag, and inside the <div>. I'm going to have a button function so it will display a button based on the condition of isClickedOn:

if it's clicked On, then it will show the Off button.
if it's clicked Off, then it will show the On button.

ButtonControl.js

return <div>{button}</div>;

So, that is where we need to create a condition and now, we need to define what this button is. What I will do is that I am going to have a let button. Like this:

let button;
return <div>{button}</div>;

And this let button, what we will do is we will check that if we have isClickedOn, if it is true, then we have a button that is going to show Off. So. let's have a component of that <OffButton />.

ButtonControl.js

let button;
if (isClickedOn) {
  button = <OffButton />;
}
return <div>{button}</div>;

At this point, we will have it like this:

ButtonControl.js

import { useState } from "react";

function ButtonControl() {
 const [isClickedOn, setIsClickedOn] = useState(false);

 const handleOnClick = () => {};
 const handleOffClick = () => {};

let button;
if (isClickedOn) {
  button = <OffButton />;
}
return <div>{button}</div>;
}

export default ButtonControl;

OnButton and OffButton Components

Before continuing doing this, let's create two more components which will be the OffButton component and the OnButton component.

What we can do is instead of creating a component in a separate file, we are going to create in the same file here at ButtonControl.js a OnButton component as well as the OffButton component.

So, I will have the OnButton() function and this OnButton() is going to take some props. And when it has a prop it is going to return a JSX.

So, what it is going to return is that it will return a <button> tag and on that button, we are going to have an onClick event.

Alright, here we are going to have the On text. Like this:

function OnButton(props) {
 return <button onClick={}>On</button>
}

Now similarly, we will also have that OffButton() function, so we can just copy the OnButton() function and it will have that function called OffButton() with the Off text. Like this:

function OffButton(props) {
 return <button onClick={}>Off</button>;
}

Next, there is a prop in both components of the OnButton(props) and OffButton(props) we are passing.

So, we have to pass some prop in here <OffButton /> in the ButtonControl component.

I am going to pass a prop as onClick property and our onClick will have a handler which will be a handleOffClick arrow function. It will be like this:

ButtonControl.js

let button;
if (isClickedOn) {
  button = <OffButton onClick={handleOffClick} />;
}

return <div>{button}</div>;

But if it is not the case then else, what I have to show is I going to have to show a OnButton. Like this:

let button;
if (isClickedOn) {
  button = <OffButton onClick={handleOffClick} />;
} else {
  button = <OnButton onClick={handleOnClick} />;
}

We will save it.

Experimenting with The State As `true`

And then, we need to do something that whenever we click on the handle events, where whenever we click on the Off, we have to change the state.

So this state of useState(false) will get changed to 'the false one'.

And I'm going to change the state setIsClickedOn() as true.

Alright, now this setIsClickedOn(true) will become false whenever you click the handleOffClick function.

So, let's have this on handleOffClick too.

const [isClickedOn, setIsClickedOn] = useState(false);

const handleOnClick = () => {
 setIsClickedOn(true);
};
const handleOffClick = () => {
 setIsClickedOn(true);
};

After we are done doing this, let's call the component.

We go to the App.js to call this ButtonControl component. Let's import the ButtonControl from the components folder to use the component.

App.js

import ButtonControl from "./components/ButtonControl";
import "./styles.css";

export default function App() {
    return (
        <div className="App">
            <ButtonControl />
        </div>
    );
}

So, we know that in React, we create multiple components and we can render the components based on the state of the application.

Button On Not Changing to Off

Let's import the ButtonControl component and have the <ButtonControl />

Then, we will save it.

And now, we see that we have a parsing error and that error is in the ButtonControl states that parsing JSX attributes must only be assigned a non-empty expression.

So, let's go back to the ButtonControl.js and let see the line number where the error occurred.

Here, we have to specify what prop we have passed in the prop is props.onClick.

Let's pass the onClick here in OnButton() function and similarly with OffButton() function. In the end it will look like the below:

ButtonControl.js

function OnButton(props) {
 return <button onClick={props.onClick}>ON</button>;
}

function OffButton(props) {
 return <button onClick={props.onClick}>OFF</button>;
}

Alright, and save it.

Now, if we refresh we will see on the screen we have that On button.

So, whenever I click on this On button on the screen, it will change to Off.

However, when I click the button again, it is NOT changing to On again.

That means we have made a mistake and this mistake you will see here on handleOffClick() function that we have to change the value back to false.

const handleOffClick = () => {
 setIsClickedOn(false);
};

Now, if I click on the button, then you will see that we have a toggle like ON and OFF button.

So, in our case the state was isClickedOn and based on the isClickedOn, we are showing different components like the OffButton component or the OnButton component.

This way you can actually do the conditional rendering in React where you can show the components based on the state of the application.

Full Code

App.js

import ButtonControl from "./components/ButtonControl";
import "./styles.css";

export default function App() {
    return (
        <div className="App">
            <ButtonControl />
        </div>
    );
}

ButtonControl.js

import { useState } from "react";

function ButtonControl() {
    const [isClickedOn, setIsClickedOn] = useState(false);

    const handleOnClick = () => {
        setIsClickedOn(true);
    };
    const handleOffClick = () => {
        setIsClickedOn(false);
    };

    let button;
    if (isClickedOn) {
        button = <OffButton onClick={handleOffClick} />;
    } else {
        button = <OnButton onClick={handleOnClick} />;
    }

    return <div>{button}</div>;
}

export default ButtonControl;

// BUTTON TEXT
function OnButton(props) {
    return <button onClick={props.onClick}>ON</button>;
}

function OffButton(props) {
    return <button onClick={props.onClick}>OFF</button>;
}

Cheers✨

Event Handling for React Beginners - Tutorial Example Code

Amirah Nasihah — Sun, 17 May 2026 14:16:16 +0000

Event Handling for React Beginners - Tutorial Example Code

This tutorial is going to give you a step-by-step guide on understanding one of the main concepts of React which is handling events in React application.

Handling Events in React

Handling events with React elements is very similar to handling events on DOM elements. There are some syntax differences:

React events are named using camelCase, rather than lowercase.
With JSX you pass a function as the event handler, rather than a string.

What I want is for when we click the button toggle, it will update or change it to the Clock component. That's why we need the useState hook to make that changes. And to change the button, we use the initial value of the boolean value of true.

First Step

Here's a heads-up, this is the continuous tutorial of the state and lifecycle method where what I want to do is to manipulate the button from showing the Clock component that is updated every second to the No Clock component that is shown on the screen.

To begin, you can create a react app using the command line or any code editor (e.g., VSCode). You can also try using CodeSandbox as an online code editor that is simple to use and allows you to deploy your code.

The best practice is to read through this tutorial and follow along several times to have a better understanding of handling events in React.

Code Output

This is the result that you will achieve once you have finished the tutorial. My suggestion is to read it through, then go through it again one step at a time using the code editor and repeat until you can do it by yourself.

Create a Button

Let's create an useState in the App.js file. The initial value of state is set to true. We will look into it more below.

const [flag, setFlag] = useState(true);

Then, we create a <button> tag inside the returned fragment. Like this:

return (
    <>
      <button></button>
    </>
)

Then, in this button, let's have a onClick. And on the onClick, I am going to give a function name, which is a toggle function. And the placeholder will be "Toggle Clock Component".

<button onClick={toggle}>Toggle Clock Component</button>

Now, we see that we have an error because the toggle function is not defined.

So, let's have a function above the return, called toggle function.

Let's create a function toggle() inside the App component.

Let's console.log("") because we want to see if we clicked the button, it will appear in the console "Toggle Clicked!" to show that is working.

Let's have an arrow function for toggle(). Like this:

 const toggle = () => {
  console.log("Toggle Clicked!");
};

So, this is the way how we can handle events in React.

Change Toggle Explained

Now, what I am going to do in App.js the file is whenever I clicked the toggle function, I want to change the [flag].

If I want to set the state of the flag, we will have a setFlag and with this setFlag, we will have just have to toggle the flag value setFlag(!flag). Like this:

App.js

function toggle() {
  console.log("button toggle clicked!");
  setFlag(!flag);
}

So, if the flag value is true, we going to set it as false, and if the flag value is false, it is going to be set to true.

!flag === false

Now, let's have here in the App component were inside the return of the <Clock /> tag, I am going to write a conditional component with it.

In the Clock component, let's write a condition and it would be that:

If I have a flag as true, then in that case I want to show the component which is the Clock component.
But if it is false, then in that case I don't want to show anything. Instead, I want to show the "No Clock component".

Like this:

{flag ? <Clock /> : "No Clock component"}

Then, I will save it is like this:

App.js

const toggle = () => {
   console.log("Toggle Clicked!");
   setFlag(!flag);
 };

 return (
   <>
     <button onClick={toggle}>Toggle Clock Component</button>
     {flag ? <Clock /> : "No Clock component"}
   </>
 );

Clean Up of Interval

Now, what you will see if I clicked the toggle the function then, you will see that we have that "No Clock component" on the screen.

Then, if I click the button again, you will see that we have back again a Clock component showing the clock ticking on the screen.

But, here what I want to show you is something from my previous post which is the lifecycle method.

So, what happened is whenever we clicked on the toggle Clock component, and whenever this is false, we don't see this Clock component. In that case, we want to do a cleanup.

And you see that now I am going to click on the toggle "No Clock component" and you will see that we have cleaned up the interval cleanup of interval in the console.

And we have also clicked on the toggle and now you will see that we don't have any setInterval running.

And as soon as I click on it again, you will see the component is rendered again and you will see that again we have the component mounted or unmounted if I click on it, it will get a toggle "No Clock component" and cleanup will run.

So, that is how you will handle the events in your react application.

App.js

import "./styles.css";
import React, { useState } from "react";
import `Clock` from "./components/`Clock`";

function App() {
 const [flag, setFlag] = useState(true);

 const toggle = () => {
   console.log("Toggle Clicked!");
   setFlag(!flag);
 };

 return (
   <>
     <button onClick={() => setFlag(!flag)}>Toggle Clock Component</button>
     {flag ? <Clock /> : "No Clock component"}
   </>
 );
}

export default App;

Anonymous Arrow Function

Here in App.js, we can also do one more thing instead of calling this toggle function as usual:

const toggle = () => {};

We can also return an Anonymous Arrow Function in the onClick:

onClick={() => setFlag(!flag)}

Observe the code below to see the differences in this method code.

And in this function, what I am going to have is a setClick() and I am going to toggle the flag value and this will work as it is.

So, if you click on the button, it still works as it is.

So, in this way, you can handle the events in React application.

First Method

App.js

export default function App() {
 const [flag, setFlag] = useState(true);

 const toggle = () => {
   console.log("Toggle Clicked!");
   setFlag(!flag);
 };

 return (
   <>
     <button onClick={toggle}>Toggle Clock Component</button>
     {flag ? <Clock /> : "No Clock component"}
   </>
 );

Look at the differences between the onClick first method and the second method. In the second method, we removed the toggle function and used an anonymous arrow function.

Second Method (Anonymous Arrow Function)

App.js

export default function App() {
 const [flag, setFlag] = useState(true);

 return (
   <>
     <button onClick={() => setFlag(!flag)}>Toggle Clock Component</button>
     {flag ? <Clock /> : "No Clock component"}
   </>
 );
}

Full Code

App.js

import "./styles.css";
import Clock from "./components/Clock";
import { useState } from "react";

export default function App() {
  const [flag, setFlag] = useState(true);

  function toggle() {
    console.log("Toggle Clicked!");
    setFlag(!flag);
  }

  return (
    <div className="App">
      <h1>Time Now:</h1>
      <button onClick={toggle}>Toggle Clock Component</button>
      <br />
      {flag ? <Clock /> : "No Clock component"}
    </div>
  );
}

Clock.js

import React, { useState, useEffect } from "react";

export default function Clock() {
  const [time, setTime] = useState(new Date().toLocaleString("en-GB"));
  const interval = setInterval(showTime, 1000);

  useEffect(() => {
    console.log("component mounted or updated");

    return () => {
      console.log("cleanup of interval");
      clearInterval(interval);
    };
  }, [time, interval]);

  function showTime() {
    setTime(new Date().toLocaleString("en-GB"));
  }
  return <h2>{time}</h2>;
}

Share This Tutorial

Cheers✨

How To Use Components & Props in React with Example Code

Amirah Nasihah — Sun, 17 May 2026 14:16:15 +0000

How To Use Components & Props in React with Example Code

In this tutorial, I'm going to give you a step-by-step guide on understanding one of the main concepts of React, which is components and props in React applications, with example code.

Components & Props in React

Now, let's understand the Components and the Props in React.

You can think of a component as a simple JavaScript function, and it will take the props as an argument, and you can use those props in your component. And then that component is going to return a JSX which is going to display it on the screen.

The First Step

To begin, you can create react app using the command line or any code editor (e.g., VSCode). You can also try using CodeSandbox for an online code editor that is simple to use and allows you to deploy your code.

To have a better understanding of how components and properties are used in React, read through this tutorial and follow along several times.

Code Output

This is the result that you will achieve once you have finished the tutorial. My suggestion is to read this guide closely, then go through it again one step at a time using code editor and repeat the process until you can do it by yourself.

A Simple JavaScript Function

So, let's do this with an example. So, what I'm going to do here in App.js file is that I'm just simply roll back everything. We don't want anything on our screen.

Now, if we go to App.js file and in this App component, you will see that this App.js is a simple function of JavaScript.

So, what I will do is I will have this constant userInfo and let's also have a string here inside the <div> tag. Let's have a string of Hello World. Let's do it like this:

App.js

function App() {
 const userInfo = {
   firstName: "Ludwig",
   lastName: "Beethoven"
 };

 return <div>Hello World</div>;
}

export default App;

Alright, and we have this App as a function, a simple javascript function, which is actually returning a JSX, and the JSX is the Hello World which is being displayed on the screen.

Understanding Components & Props

So, this App is called an App component and in React, each of the component you can think of that you want to split your UI into different components.

And each of the component will have it's data in the form of a prop.

Let's take an example. So, what I'm going to do is I'm going to go here in src folder.

And then, I will create a folder named components inside the src folder where in here I can create my own components.

Then, inside the components folder I will have a component called Welcome.js. Let's create a .js file which contained a component call Welcome.js.

Alright, and you should make sure that whenever you create a component, you should always start a component with a capital letter.

Welcome.js

Here in the Welcome.js file, I want to create a component.

So, what I will do here is that I'm going to create a function and the name of the function will be Welcome. Like this:

function Welcome() {}

Alright, then at the end of the Welcome function, I will have to export this Welcome component.

So, I will have a:

export default Welcome;

Then, this Welcome component should return some kind of a JSX. Let's return a JSX where I'm going to return <h1> tag and I will have a Hello from Welcome Component. Like this:

function Welcome() {
 return <h1>Hello from Welcome Component</h1>;
}

export default Welcome;

Then, I will save it.

As soon as we save it, you will not see anything on the screen because we have created a component but we are not using this component.

To Use The Component

In order to use the Welcome component, we need to import the component.

So, let's go to the App.js file and at the top of the code, I will import the Welcome component.

Let's import the Welcome component like so:

App.js

import Welcome from "./components/Welcome";

Alright, now the Welcome component is imported.

And then, if you want to use this Welcome component, what you need to do here is remove this <div> element. From this:

<div>Hello World</div>;

And, what I'm going to have is an empty fragment <> </>.

So, let's have an empty fragment and inside this empty fragment, I will have the Welcome component. Like this:

return (
  <>
    <Welcome />;
  </>
);

So, in this way, you can use the component and let's save it.

An empty tag <></> is a shortcut syntax for fragment components. While it is available in the JSX syntax, it is not part of the HTML standard and hence is not natively supported by browsers.

Now, you will see that as soon as we save it, you will see on the screen that Hello from Welcome Component.

Now, what I want is I want to pass the props to this component which is the App component. I want to pass some information. So, I will go here in App component on return <Welcome /> and I'm going to pass the user.

The prop name is user and I'm going to have the userInfo. It will be like this:

App.js

function App() {
 const userInfo = {
   firstName: "Ludwig",
   lastName: "Beethoven"
 };

  return (
    <>
      <Welcome user={userInfo} />;
    </>
  );
}

export default App;

So, I will pass the userInfo and this userInfo, I will save it.

Now, I have passed the props.

To Use Props in React

Now, I want to use this props.

To use the props, you will need to go here in Welcome component, and whenever you pass a prop in a component, you will take it as an argument.

Like this:

Welcome.js

function Welcome(props) {}

Alright, let's do a simple console.log on the Welcome component.

I'm going to have a console.log of the props because I want to see what props that I have. Then, I will save it.

function Welcome(props) { 
    console.log(props) 
}

And next, let's have the inspect element.

I will go to the console. And in the console, you will see that I have an Object.

If I expand this Object, I will see that I have the information of the user and the name.

So, if I want to use it, what I can do is I can simply have here the props.name. Like this:

Welcome.js

function Welcome(props) { 
    console.log(props)
    return <h1>Hello {props.name} from Welcome Component</h1>;
}

export default Welcome;

Alright, and I will save it now.

As soon as I save it, you will see that I don't see name displayed on the screen.

That is because I made a mistake where it supposed to be props.user.firstName. Let's have it like this:

Welcome.js

function Welcome(props) { 
    console.log(props)
    return <h1>Hello {props.user.firstName} from Welcome Component</h1>;
}

export default Welcome;

Alright, and when I save it we will see the Hello Ludwig from Welcome Component on the screen.

Hence, in this way, you can actually create a component and you can pass the prop.

Reusable Component

Now, I want to show you that how you can make this on it as a reusable component.

So, let's remove this here inside the <h1> tag and I'm going to simply have the name here again. Like this:

Welcome.js

function Welcome(props) { 
    console.log(props)
    return <h1>Hello {props.name} from Welcome Component</h1>;
}

export default Welcome;

Alright, and what I want is that this Welcome component to be repeated three (3) times with a different name.

App.js

I will go to the App.js file and I'm going to repeat this three times because I want to use this three times. Like this:

<Welcome user={userInfo} />
<Welcome user={userInfo} />
<Welcome user={userInfo} />

Alright, and let's change the information first.

I'm going to pass the first information as Ludwig. Next, I'm going to pass the second information as Beethoven and for the third information, I will pass this as Johann.

Alright, now I have the three users like below:

<Welcome user="Ludwig" />
<Welcome user="Beethoven" />
<Welcome user="Johann" />

You will see that we have three different users but, you will see that we don't have the username displayed on the screen.

So, that means we made a mistake and the mistake is we are using props.name in Welcome component.

Welcome.js

return <h1>Hello {props.name} from Welcome Component</h1>;

The problem of our prop is the name. I'm going to go and I will simply going to change this as user and I will save it and you will see that we have that Hello Ludwig from Welcome Component along with all of the other users been displayed on the screen.

Welcome.js

function Welcome(props) {
  console.log(props);
  return <h1>Hello {props.user} from Welcome Component</h1>;
}

export default Welcome;

Now, try thinking and practice on how to display the lastName on the screen.

Class Based Component

So, this is how you can use the components and the props and this component is called a function component because you are writing it as a JavaScript function.

And another way of writing a component which is using a class based component.

But, I'm not going to show the class based component because the class based component is mostly used on the Legacy (outdated or obsolete) application and any modern React application is going to use the function component.

So, you can relate this article of components and props with my another article about understanding the state and the lifecycle with examples.

Full Code

App.js

import Welcome from "./components/Welcome";

function App() {
  const userInfo = {
    firstName: "Ludwig",
    lastName: "Beethoven"
  };

  return (
    <>
      <Welcome user="Ludwig" />
      <Welcome user="Beethoven" />
      <Welcome user="Johann" />
    </>
  );
}

export default App;

Welcome.js

function Welcome(props) {
  console.log(props);
  return <h1>Hello {props.user} from Welcome Component</h1>;
}

export default Welcome;

Share This Tutorial

Cheers✨

Prevent Memory Leakage with the `useEffect` Hook - React

Amirah Nasihah — Sun, 17 May 2026 14:16:13 +0000

Prevent Memory Leakage with the `useEffect` Hook - React

Beginners may be concerned about having useEffect in the code in my previous tutorial post about useState and useEffect. You can check out my step-by-step React Tutorial Beginner - useState and useEffect with Example Code. I will explain below why we need a useEffect in our code in this post.

Memory Leakage in React Applications

Create a useEffect hook to Clock.js that clears the setInterval every time the Clock component is updated. Other than that, you'd have a lot of "intervals" that may result in memory leaks.

If you're not sure what memory leaking is, do a Google search for “memory leakage”.

What is the `useEffect` Hook?

When a component is updated or re-rendered, the useEffect hook is invoked or called. You can use it to perform tasks before the component is loaded, updated, or refreshed.

Simplest Use

The useEffect hook is used in the simplest possible way in the example below. It basically implies that the page title will be modified to "You clicked X times" every time the component is refreshed.

  useEffect(() => {
    // Update the document title using the browser API
    document.title = "You clicked ${count} times";
  });

Only refresh when a certain variable changes.

In this example below, you can see that we have added [time] as the second parameter to the useEffect hook. That is, this useEffect hook would only run when the component is updated or refreshed due to an update in the time variable. This also applies to the first load.

  useEffect(() => {
    setInterval(showDate, 1000);
  }, [time]);

Cleaning Up

Sometimes the action you perform in the useEffect hook will run for a long time or even forever (e.g., refreshing the clock every second with setInterval). In this situation, make sure that when React refreshes the component, it cleans up the “long-running tasks”. Otherwise, you'd be running a slew of "long-running tasks" in the background, using up your whole computer's RAM.

To do this, you must return a "clean up function" from the useEffect hook. React will use that function to clean up the long-running task when the component is refreshed. If you put a long-running task in the useEffect hook, you should always include a clean up function.

  useEffect(() => {
    const interval = setInterval(showDate, 1000);

    return () => {
      clearInterval(interval);
    };
  }, [time]);

In the above example, you can see that we returned an arrow function called clearInterval to handle the cleanup for us.

Don't be too worried about this if you're not quite sure. It is rarely used in actual code.

Share This Tutorial

Cheers✨

React Tutorial Beginner - `useState` and `useEffect` with Example Code

Amirah Nasihah — Sun, 17 May 2026 14:16:11 +0000

React Tutorial Beginner - `useState` and `useEffect` with Example Code

In this tutorial, I'm going to give you a step-by-step guide on understanding the main concepts of React which introduce the concept of state and lifecycle in a React component.

State is Memory of a Component

Let's have a brief on what State is.

As a result of an interaction, components frequently need to update what's on the screen. Typing into the form updates the input box, clicking "next" on an image carousel changes the picture displayed and clicking "purchase" adds a product to the shopping cart. Components must "remember" information such as the current input value, the current picture, and the shopping cart. This type of component-specific memory is referred to as a state in React.

Full Tutorial Code

These are the code that you will achieve once you are done with the tutorial. My advice is, to read it until finished and start doing again using the code editor.

import React, { useState, useEffect } from "react";

function Clock() {
  const [time, setTime] = useState(new Date().toString());

  useEffect(() => {
    console.log("component mounted or updated");
    const interval = setInterval(showDate, 1000);

    return () => {
      console.log("cleanup of Interval");
      clearInterval(interval);
    };
  }, [time]);

  function showDate() {
    console.log(new Date().toString('en-GB'));
    setTime(new Date().toString());
  }

  return <h1>{time}</h1>;
}

export default Clock;

First Step

To begin, you can start creating your own react app using the command line or can directly go to CodeSandbox if you want to skip using the command line which is faster. CodeSandbox is an online code editor and prototype tool that speeds up the creation and sharing of web apps where you can directly deploy your app without any hustle.

First, create a new folder inside the src folder named components. Then, create a JavaScript file called Clock.js which in React is the component of Clock.

Create a function Clock Component.

Export this component by typing export default Clock below the function.

function Clock() {}

export default Clock;

Let's create another function in this component, which will be the showDate() function.

After have showDate(), we'll have a <h1> tag to make it large or other tags you prefer and this <h1> will have the date of {new Date().toString()}.

return <h1>{new Date().toString()}</h1>;

Then we call this function with the setInterval(). And have the setInterval as in every one second. Let's call the function first.

function showDate() {
 return <h1>{new Date().toString()}</h1>;
}

setInterval(showDate, 1000);

And this showDate() function will be called in every one second.

Alright, and another thing going do is to have also console.log() above the return method. We console.log() the Date function to see whether its running or not in our console. Like below:

function showDate() {
 console.log(new Date().toString());
 return <h1>{new Date().toString()}</h1>;
}

setInterval(showDate, 1000);

And have to also return a JSX because every component returns a JSX.

Return a JSX below the setInterval() method.

Type return (<div> </div>) as below and let's call the showDate() function inside the <div> JSX.

function Clock() {
 return (
   <div>
     <h1>Hello from Clock component!</h1>
     <div>{showDate()}</div>
   </div>
 );
}

You can also use an empty fragments <> </> to display the JSX like this:

function Clock() {
 return (
  // empty fragment
   <>
     <h1>Hello from Clock component!</h1>
     <div>{showDate()}</div>
   </>
  // empty fragment
 );
}

If you are not seeing anything happen on your screen, go to App.js and import our Clock Component, then use the Clock Component by adding the <Clock />. Like this:

App.js

import Clock from "./components/Clock";

function App() {
  return (
    <>
      <Clock /> {*to use the Clock Component*}
      <p>Hello from App.js</p>
    </>
  );
}

export default App;

Now we will see what is actually happening when we use the Clock component. We see the time and here in the Clock component, you will see that we have a setInterval which is being called every one second.

So, if I go to the inspect element (F12 hotkey) and if I go to console, then in the console you will see that the time is getting updated every second. This is what we will achieve so far:

function Clock() {
  return (
    <div>
      <h1>Hello from Clock component!</h1>
      <div>{showDate()}</div>
    </div>
  )
}

function showDate() {
 console.log(new Date().toString());
 return <h1>{new Date().toString()}</h1>;
}
setInterval(showDate, 1000);

export default Clock;

Time not updated on the screen

But then, on the screen this time not getting updated every second. Only inside the console does it get updated every second.

And that is where we have to use the State.

A state will be a local state of a component. So, whenever a State is changed, a component will re-render and it will render the updated JSX.

So, what we can do is, we need to import a State.

What to do is in the Clock.js Component. Let's have an import React from 'react'; at the top of the Clock() function.

And in order to use a State, there is a hook called useState. To use the useState hook, you need to import the state variable from 'react'. Like below:

import React, { useState } from "react";

Alright, now let's create a constant. To use a State in a function component, you need to create a constant and you have to use an array [] like structure, and then you will have a useState(). Like this:

const [] = useState();

And here you need to give the initial value of your state => useState(initial value). So, my initial value will be the same which is the Date() function.

const [] = useState(new Date().toString())

Put inside useState(), and here I will have the time and I will have a setTime. Whenever you use a useState(), it actually gives you a time variable and it also gives a function to update that variable.

const [time, setTime] = useState(new Date().toString())

So now, we are going to change line return <div>{showDate()}</div>; and have a {time} here and save it. Then start seeing a time on the screen and this is the time.

function Clock() {
 return (
   <div>
     <h1>Hello from Clock component!</h1>
     <div>{time}</div>
   </div>
 );
}

Now, what I'm going to do is I need to update that time.

So whenever this setInterval makes a call to the showDate() in every one second instead of, returning this return <h1>{new Date().toString()}</h1>;

Next, I'm going to update my state.

To Update the State

So want to update my state, I'm going to do a setTime() and this setTime() is going to update the state.

So, let's type setTime(new Date().toString()) and save it.

So, every second my showDate() function is being called function showDate() { and whenever it is called I changed the state variable.

So, you change the state variable with the help of set function; [setTime] = ... This is a set function setTime(new Date().toString()); and as soon as I do a setTime() with a new updated time new Date().toString(), so my state useState() gets changed and whenever the states get change, the component is re-rendered and that's where we will see that the screen is now updating.

We can see now on the screen the time is running every second and also from the console.

If error occurs, make sure that the showDate() is inside the Clock() function. Like below:

import React, { useState } from "react";

function Clock() {
 const [tick, setTick] = useState(new Date().toString());
 setInterval(showDate, 1000);

 return (
   <>
     <h1>Hello from Clock component!</h1>
     <div>{tick}</div>
   </>
 );

 function showDate() {
   console.log(new Date().toString());
   setTick(new Date().toString());
 }
}

export default Clock;

This showDate() function works as updating in every one second, and we use showDate() function inside the Clock function to update the time every one second, to do that, we use state variable which is setTime(new Date().toString()). Earlier in showDate() function we put return <h6>{date}</h6>; because whenever you use a useState(), it actually gives you a time Variable and it also gives a function to update that variable which using set.

Thats why we change from return <h6>{date}</h6>; to setTime(new Date().toString()).

Now on the screen, the time is running every one second and also from the console.

import React, { useState } from "react";

function Clock() {
 const [time, setTime] = useState(new Date().toLocaleTimeString("en-GB"));
 setInterval(updateTime, 1000);

 return (
   <>
     <h2>{time}</h2>
   </>
 );

 // this function used to update the time every one second
 function updateTime() {
   console.log(new Date().toLocaleTimeString("en-GB"));
   setTime(new Date().toLocaleTimeString("en-GB"));
 }
}

export default Clock;

`useState` Hook

Now, what is this useState() is and what is this [time] and [setTime] is.

Let's have a state, I'm gonna have a constant and now I'm going to create a state variable of name.

So, you will give it as a name, and then whenever you want to update this name, you will update it with the help of a setName function.

const [name, setName]

For example, you can also do the same thing whenever you want to have a flag. Alright, and now you want to update this flag value so you will have a setFlag

const [flag, setFlag]

Alright, so you will use the useState() as const [flag, setFlag] = useState() and then you will set the initial value.

So, my initial value of the flag is true. so let's have a useState(true).

In this way, you will create and use the State.

Lifecycle using the `useEffect`

Now, what is the lifecycle?

So whenever you have a component, the component also has lifecycles.

So the lifecycles will be that you want to execute something whenever your component is mounted or whenever your component is first time rendered or you want to do something whenever your component is getting updated or whenever your component is destroyed.

💡 Mounting is the phase in which our React component mounts on the DOM (i.e., is created and inserted into the DOM). This method is called just before a component mounts on the DOM or the render method is called. After this method, the component gets mounted.

For example, the Clock component is inserted into the DOM.

We use lifecycle because we want the clock keeps updating. So, need to use the useEffect() function

So, in those cases, you will use a lifecycle.

To use a life cycle method in the function component, we make use of a useEffect hook.

import React, { useState, useEffect } from "react";

So, this way I will use an useEffect hook. And now what I'm going to do here is that I'm going to write a useEffect and this useEffect will have two arguments, useEffect(args1, args2)

The first argument will be a function or a side effect that you want to run and the second argument will be a dependency array. I will use an arrow function as the first argument.

useEffect(() => {})

And the second argument will be the dependency array. So this dependency array will depend on these State variables.

So, now what I'm going to do here is that let's have a console.log() and I'm going to have here a string of "component mounted or updated".

Alright, and remove the dependency array and save it.

 useEffect(() => {
   console.log("component mounted or updated");
 });

I'll save it and now let's go to the inspect element and I will go to the console and here I will just remove this function because we don't want and it's polluting our console. Let's comment out console.log(new Date().toString());

Alright, now I will refresh my page. And you will see that as soon as I refresh my page, My component is mounted and my state is also getting updated.

So, the state is getting updated because this state variable is getting updated.

So, if I don't want that this gets updated every time, what I can do here is that I have a dependency array []

 useEffect(() => {
   console.log("component mounted or updated");
 }, []);

And if I give it a dependency in this array of a state where able then in that case the useEffect() will run only if the state variable changes.

So, what I'm going to do is I'm going to have a flag here:

useEffect( ... ;}, [flag]);

Then, save it, and now will refresh the page.

So, you now will see that even though your time is getting changed in every one second, your useEffect() useEffect( ... ;}, [time]); is not running because your useEffect() is now dependent on another state variable which is a time.

So, that means whenever a time is changed in that case, the useEffect() will run.

So, if the flag is changing from true to false, then you will see that the useEffect will run if I change this flag to true again, then you will see that the useEffect will run.

So this way this is a lifecycle of a component, whenever a component is mounted or whenever a component is updated. you want to run some side effects.

Now, there is a scenario that whenever a component is destroyed you want to run effect of unmounting that whenever the component is unmounted you want to do something.

So, in that case, what we can do is that let's have a constant and gonna have an interval and I will remove/cut the setInterval()

So now I have the interval here and this interval depends on the time.

So, I'm gonna copy this {time} and gonna have the {time} here at useEffect dependency array:

useEffect( ... ;}, [time]);

So, you can see that every time this showDate() function is running my component is getting updated.

So, that's why we see a lot components updated on console logs.

Now, let's assume that you have a subscription to this interval.

Now, you want to clear this subscription whenever your component is unmounted or whenever your component is not visible on your screen.

So what we can do here, inside this useEffect() function is that we can have a clean function. Which will have a return and this will be an arrow function. Alright and here, inside this arrow function, you can do your cleanup.

So, let me have a console.log("cleanup of Interval") and below gonna have the clearInterval method. And let gonna clear this interval. I'm going to add the constant interval into the clearInterval(interval). Like below:

() => {
     console.log("cleanup every one second");
     clearInterval(setInterval(showDate, 1000));
   };

Now see that whenever a component is mounted. the first thing that will happen is the cleanup function will run whenever this component is mounted or whenever a component is unmounted.

useEffect(() => {
  console.log("component keep mounted or updated");

  return () => {
    console.log("cleanup of Interval");
    clearInterval(setInterval(updateTime, 1000));
  };
}, [time]);

Dependency Array

If we remove the dependency, which is [time], in the console will look like this, not update the interval.

component keep mounted or updated
cleanup of Interval
component keep mounted or updated

It is not running because the useEffect() is now dependent on another state variable which is a time.

But if we put dependency array [time], then the console will look like this:

cleanup of Interval
component keep mounted or updated
cleanup of Interval
component keep mounted or updated
cleanup of Interval
component keep mounted or updated
cleanup of Interval
component keep mounted or updated
cleanup of Interval

Then, in that case, the useEffect() will run only if the state variable changes. The second argument is will be the dependency array. So, this dependency array will depend on these State variables.

So, this is how you will do the State and the lifecycle in the React components.

CodeSandbox

Share This Tutorial

Cheers✨

Props vs State in ReactJS

Amirah Nasihah — Sun, 17 May 2026 14:16:09 +0000

Props vs State in ReactJS

Props

"Props" stands for "Properties." They are read-only components. It is an object which stores the value of the attributes of a tag and works similarly to the HTML attributes. It gives a way to pass data from one component to another component. It is similar to function arguments. Props are passed to the component in the same way as arguments are passed in a function.

Props are immutable, so we cannot modify the props from inside the component. Inside the components, we can add attributes called props. These attributes are available in the component as this.props and can be used to render dynamic data in our render method.

When you need immutable data in the component, you have to add props to the reactDom.render() method in the main.js file of your ReactJS project and use it inside the component in which you need it. It can be explained in the below example.

State

The state is an updatable structure that is used to contain data or information about the component. The state of a component can change over time. The change in state over time can happen as a response to user action or a system event. A component with the state is known as a "stateful component." It is the heart of the react component that determines the behavior of the component and how it will render. They are also responsible for making a component dynamic and interactive.

A state must be kept as simple as possible. It can be set by using the setState() method, and calling the setState() method triggers UI updates. A state represents the component's local state or information. It can only be accessed or modified inside the component or by the component directly. To set an initial state before any interaction occurs, we need to use the getInitialState() method.

For example, if we have five components that need data or information from the state, then we need to create one container component that will hold the state for all of them.

Defining State

To define a state, you have to first declare a default set of values for defining the component's initial state. To do this, add a class constructor which assigns an initial state using this.state. The 'this.state' property can be rendered inside the render() method.

example

The below sample code shows how we can create a stateful component using ES6 syntax.

import React, { Component } from "react";
class App extends React.Component {
    constructor() {
        super();
        this.state = { displayBio: true };
    }
    render() {
        const bio = this.state.displayBio ? (
            <div>
                {" "}
                <p>
                    <h3>
                        Skyeagle is one of the best Java training institute in
                        Noida, Delhi, Gurugram, Ghaziabad and Faridabad. We have
                        a team of experienced Java developers and trainers from
                        multinational companies to teach our campus students.
                    </h3>
                </p>{" "}
            </div>
        ) : null;
        return (
            <div>
                {" "}
                <h1> Welcome to </h1> {bio}{" "}
            </div>
        );
    }
}
export default App;

To set the state, it is required to call the super() method in the constructor. It is because this.state is uninitialized before the super() method has been called.

Output

Changing the State

We can change the component state by using the setState() method and passing a new state object as the argument. Now, create a new method toggleDisplayBio() in the above example and bind this keyword to the toggleDisplayBio() method otherwise we can't access this inside toggleDisplayBio() method.

this.toggleDisplayBio = this.toggleDisplayBio.bind(this);

Example

In this example, we are going to add a button to the render() method. Clicking on this button triggers the toggleDisplayBio() method which displays the desired output.

import React, { Component } from "react";

class App extends React.Component {
    constructor() {
        super();
        this.state = { displayBio: false };
        console.log("Component this", this);
        this.toggleDisplayBio = this.toggleDisplayBio.bind(this);
    }
    toggleDisplayBio() {
        this.setState({ displayBio: !this.state.displayBio });
    }

    render() {
        return (
            <div>
                {" "}
                <h1>Welcome to </h1>{" "}
                {this.state.displayBio ? (
                    <div>
                        {" "}
                        <p>
                            <h4>
                                Skyeagle is one of the best Java training
                                institute in Noida, Delhi, Gurugram, Ghaziabad
                                and Faridabad. We have a team of experienced
                                Java developers and trainers from multinational
                                companies to teach our campus students.
                            </h4>
                        </p>{" "}
                        <button onClick={this.toggleDisplayBio}>
                            {" "}
                            Show Less{" "}
                        </button>{" "}
                    </div>
                ) : (
                    <div>
                        {" "}
                        <button onClick={this.toggleDisplayBio}>
                            {" "}
                            Read More{" "}
                        </button>{" "}
                    </div>
                )}{" "}
            </div>
        );
    }
}

export default App;

Output:

When you click the Read More button, you will get the below output, and when you click the Show Less button, you will get the output as shown in the above image.

Combination of State and Props

It is possible to combine both state and props in your app. You can set the state in the parent component and pass it in the child component using props. It can be shown in the below example.

Example

App.js

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { name: "Skyeagle" };
    }
    render() {
        return (
            <div>
                {" "}
                <JTP jtpProp={this.state.name} />{" "}
            </div>
        );
    }
}
class JTP extends React.Component {
    render() {
        return (
            <div>
                {" "}
                <h1>State & Props Example</h1>{" "}
                <h3>Welcome to {this.props.jtpProp}</h3>{" "}
                <p>
                    Skyeagle is one of the best Java training institute in
                    Noida, Delhi, Gurugram, Ghaziabad and Faridabad.
                </p>{" "}
            </div>
        );
    }
}
export default App;

Main.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";

ReactDOM.render(<App />, document.getElementById("app"));

Differences between State vs. Props

State

The state is an updatable structure that is used to contain data or information about the component and can change over time. The change in state can happen as a response to user action or system event. It is the heart of the react component which determines the behaviour of the component and how it will render. A state must be kept as simple as possible. It represents the component's local state or information. It can only be accessed or modified inside the component or by the component directly.

Props

Props are read-only components. It is an object which stores the value of attributes of a tag and works similarly to the HTML attributes. It allows passing data from one component to another components. It is similar to function arguments and can be passed to the component the same way as arguments passed in a function. Props are immutable so we cannot modify the props from inside the component.

Share This Tutorial

Cheers✨

buildspace web3 demo showcase!

Amirah Nasihah — Sun, 17 May 2026 14:16:07 +0000

buildspace web3 demo showcase!

Last night's buildspace demo day was a blast, as was go-karting around the map on gather.town dressed as a pumpkin. It's a massive web3 display!

Over 150 fantastic web3 makers from the buildspace ecosystem and are giving them a shot to showcase what they've shipped. Got people building in GameFi, dev tools, education, social, and much more.

buildspace N&W Demo Day happened on Saturday, August 6 at 11:00 PM Malaysia Time or August 6 at 11:00 AM ET. They had more than 500 people running around the demo map within that 4 hours.

This was my second time attending a buildspace demo day, also explored a lot of crazy projects and met some fantastic people.

Rubix , WaitlistPanda, and pipgig piqued my interest. Also, listen to and chat with them!

ReactJS - Introduction

Amirah Nasihah — Sun, 17 May 2026 14:16:06 +0000

ReactJS - Introduction

What is ReactJS?

➡️declarative, efficient, and flexible JavaScript library for building reusable UI components.

➡️an open-source, component-based front-end library responsible only for the view layer of the application.

➡️created by Jordan Walke, a software engineer at Facebook.

➡️ was initially developed and maintained by Facebook and later used in its products like WhatsApp & Instagram before it was released to the public in the month of May 2013.

➡️In MVC (model view controller) architecture, React is the 'V' which stands for view, whereas the architecture is provided by Redux or Flux.

How ReactJS Works

💥A ReactJS application is made up of multiple components, each component responsible for outputting a small, reusable piece of HTML code.

💥These Components can be nested with other components to allow complex applications to be built of simple building blocks.

💥ReactJS uses a virtual DOM-based mechanism to fill data in HTML DOM.

💥The virtual DOM works fast as it only changes individual DOM elements instead of reloading the complete DOM every time.

DEV Community: Amirah Nasihah

Creating Dynamic Lists in React: A Step-by-Step Guide

Creating Dynamic Lists in React: A Step-by-Step Guide

Code Output

Getting Started

What Components Needed

Data Retrieving Component

Display the Lists Component

Reusable Component

Destructuring

Full Code

Dev Retro 2022: My Story of Switching Careers as a Beginner Developer

Dev Retro 2022: My Story of Switching Careers as a Beginner Developer

Here we go!🏌️

This Year I Achieved...

🔸Accepted Into Software Engineering Course

🔸Featured On Hashnode 🎉

🔸Job At Tech Company

🔸Networking + Cool Events + Epic Stuff

To Wrap Up!

Prompt 101: Generate Cool Stable Diffusion Images with this Guide

Prompt 101: Generate Cool Stable Diffusion Images with this Guide

What is Prompt

Getting Started

TL;DR: Prompt Formula

Share This Tutorial

How To Start Generate AI Art For Noob

How To Start Generate AI Art For Noob

1️⃣ Lexica search engine

2️⃣ Artbreeder

3️⃣ NightCafe

4️⃣ OpenAI's DALL-E 2

5️⃣ Midjourney

6️⃣ Stable Diffusion web demo

7️⃣ Installing and using Stable Diffusion

🔥 AI generated Images

Changing Button's Text using React

Changing Button's Text using React

Conditional Rendering

To Start

Code Output

Update the Button Text (On to Off)

handleOnClick And handleOffClick Explained

OnButton and OffButton Components

Experimenting with The State As true

Button On Not Changing to Off

Full Code

Event Handling for React Beginners - Tutorial Example Code

Event Handling for React Beginners - Tutorial Example Code

Handling Events in React

First Step

Code Output

Create a Button

Change Toggle Explained

Clean Up of Interval

Anonymous Arrow Function

First Method

Second Method (Anonymous Arrow Function)

Full Code

Share This Tutorial

How To Use Components & Props in React with Example Code

How To Use Components & Props in React with Example Code

Components & Props in React

The First Step

Code Output

A Simple JavaScript Function

Understanding Components & Props

To Use The Component

To Use Props in React

Reusable Component

Class Based Component

Full Code

Share This Tutorial

Prevent Memory Leakage with the `useEffect` Hook - React

Prevent Memory Leakage with the useEffect Hook - React

Memory Leakage in React Applications

What is the useEffect Hook?

Simplest Use

Cleaning Up

Share This Tutorial

`handleOnClick` And `handleOffClick` Explained

Experimenting with The State As `true`

Prevent Memory Leakage with the `useEffect` Hook - React

What is the `useEffect` Hook?

React Tutorial Beginner - `useState` and `useEffect` with Example Code

`useState` Hook

Lifecycle using the `useEffect`