ReactJS — Part 2

Aditya Kumar

16 min readJul 18, 2026

Understanding Props and PropTypes in React:

Let’s first understand the difference between export default vs named export in React.

What are exports?

In React, we use exports to share code from one file to another. There are two main types:

1. export default

2. export (named export)

What is ‘export default’?

What it means: A file can have only ONE default export

It is used when:

· You want to export main thing from a file

Example: a basic example.

Create a new file named, Module1.mjs:

And one another file named, Modul2.mjs:

Now, in terminal try to run the Module2.mjs using the node:

What this output indicates about the ‘export default’?

It exports one main value from a file. Even though you had 3 variables (a, b, c), only this one was exported: export default a; (look at line 5 of Module1.mjs). Also, we can name the import anything you want, here we wrote ‘import any_name’ but still got the ‘Aditya’. So this shows: default export is NOT bound to a name.

Only ONE default export is allowed per file, if one write like this in Module1.mjs:

And then try to run the node: it will give the error.

Now, let’s talk about named exports.

What are ‘named export’?

What it means: You can export multiple things from a file.

Example: Module1.mjs:

While Moduel2.mjs:

Now, in the terminal:

What you learn from this output about ‘named export’?

· Names are FIXED in named exports, we must use the exact same names.

· You can import only what you need

· Multiple exports are allowed (unlike default)

· You can rename while importing (using ‘as’)

How does they differ from each other?

Can we use both together?

Yes, we can use both ‘export default’ and ‘named export’ together.

Example:

Module1.mjs:

Module2.mjs:

Terminal:

Now, let’s talk about the “Props”….!

What are Props?

Props = Properties. In simple words: Props are used to pass data from one component to another in React.

Think like:

· Function arguments

· Input to a component

Why Props are needed?

Without props:

· Every component shows same data

· No flexibility

With props:

· We can send different data to same component

Example: a basic example without props (using no extra file)

App.js:

Terminal:

Output:

Now, the same example using the props:

Output:

Can we use props to pass other datatypes except string?

Yes, we can do so.

· String → “text”

· Number → {20}

Example:

App.js:

Output:

What if the default behaviour of props?

App.js: (here we just emptied the passed value, it is not default behaviour example)

Output:

Example: default behaviour. Props have no built-in default values. If missing → undefined.

App.js:

Output:

How to handle the missing prop of above example?

We can use default props to do so.

Example:

App.js: (modern way)

Output:

Example: Default inside function body

App.js:

Output:

Example: defaultProps (older approach)

App.js:

Output:

Discouraged

Now, let’s understand about passing JSX with props:

How to pass HTML code via JSX?

children is the recommended React pattern for passing markup from a parent component to a child component.

Example:

Sample.jsx:

App.jsx:

Output:

Now, suppose we want to make the colour of the text dynamic as well:

App.jsx:

In this code, the App component renders the Sample component twice. The first Sample receives a color prop with the value “Pink” and displays the heading “Hello, Aditya” as its children, so the text appears in pink. The second Sample is rendered without a color prop and displays “Hello, Utsav” as its children. Since both headings are passed between the opening and closing <Sample> tags, they are received through the children prop and rendered inside the <div> defined in the Sample component. This demonstrates how React components can be reused with different content and props to produce different outputs.

Sample..jsx:

Sample is a reusable React functional component that accepts two props: children and color. The children prop represents any JSX content placed between the <Sample> opening and closing tags when the component is used, and it is rendered inside the <div>. The color prop is used to dynamically set the text color through inline styling. The component also applies a fixed green border and a width of 300px, making it a simple wrapper that can display different content and text colors based on the props passed to it.

Output:

Now, suppose we want to make Get Input Field Value, I meant suppose we want to see the text user entered dynamically below the text box.

App.jsx:

Output:

Output: when we begin typing in the box

This code demonstrates how to use React’s useState hook to capture and display the value entered into an input field. The state variable val is initialized with “Aditya”. Whenever the user types in the input box, the onChange event is triggered, and setVal(event.target.value) updates the state with the current input value. Since React re-renders the component whenever state changes, the <h1>{val}</h1> element immediately displays the latest text entered by the user. This creates a real-time connection between the input field and the displayed value, a pattern known as a controlled component in React.

Now, suppose we want that the value in both the input field and the text displayed below it get deleted when we click on “clear” button, then we can use this:

App.jsx:

Output:

Output: when clicked on the button

Understanding Controlled Componenta:

What are Controlled Components?

A controlled component in React is a form element (such as an <input>, <textarea>, or <select>) whose value is controlled by React state rather than the DOM itself.

Example:

App.jsx:

Output:

Output: when started typing something

How it works

1. The input’s value is stored in React state (val).

2. The value attribute is linked to that state.

3. When the user types, onChange updates the state.

4. React re-renders the input with the updated value.

This means React is the single source of truth for the input value.

What are Uncontrolled Components?

An uncontrolled component is a form element whose value is managed by the DOM itself instead of React state. React does not track the input value on every keystroke. Instead, you access the value only when needed, typically using a ref.

In other words:

· Controlled Component → React state controls the input value.

· Uncontrolled Component → The DOM controls the input value.

App.jsx:

Output:

Press enter or click to view image in full size

Output: when typed something and clicked on the “Get Value” button.

How It Works

1. useRef() creates a reference to the input element.

2. The input stores its own value in the DOM.

Get Aditya Kumar’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

3. React does not update state when the user types.

4. When the button is clicked, inputRef.current.value retrieves the current value from the DOM.

When to Use Uncontrolled Components

· Simple forms with minimal validation.

· Integrating with non-React libraries.

· File inputs (<input type=”file”>), which are commonly handled as uncontrolled components.

Understanding State & Handling Events in React :

First understand about the Hooks.

What are Hooks?

In React, Hooks are special functions that let you use state and other React features in functional components (without writing class components).

In brief:

· useState → lets you add and manage state

· useEffect → handles side effects (like API calls, timers)

· useContext → shares data across components easily

What is State in React?

State is data inside a component that can change over time.

Why do we need State?

Without state:

· UI is static

· No updates happen

With state:

· UI updates automatically when data changes

Example: a basic example without the useState.

App.js:

Output:

Now, suppose I want that there be a button and when someone clicks on that button the name of the fruit will get changed. For this, we will definitely need a function, and the button.

App.js:

Output:

Output: when button was clicked.

But, why this doesn’t worked? Like, we have given the function, said that when this function is used, the value of fruit to be changed to the banana, but still Apple is reflected. Why?

ReactJS shows the update on the UI only when its component get re-rendered.

Now, To prove that value is updated but not reflected in the UI we will console the updated value.

App.js:

Output:

Clearly, in console it says that function was called, and value of fruit is updated from Apple to Banana and reflected in console, but not in the UI.

So, how to overcome this? We will use State.

Let’s talk about ‘state’ again.

What is State?

State in React:

· State is a built-in feature used to store and manage data inside a component.

· It is mutable, meaning it can change over time.

· When state changes, React automatically re-renders the component to update the UI.

· In functional components, state is managed using the useState hook.

Example:

const [count, setCount] = useState(0);

Here:

· count → current state value

· setCount → function used to update state

· useState(0) → initial value is 0

How does state differ from variable?

How to import the state?

In React, we don’t import “state” directly. Instead, we import the Hook called useState from React. Correct way:

import { useState } from “react”;

Example: using useState for that example of updating the fruit name. We are still not updating.

Output:

Does useState always returns an array?

Yes, useState always returns an array in React. What it returns:

· Current state value

· Function to update that state

Now, we will implement the part of button.

App.js:

Output:

Output: when clicked.

In this React code, useState(“Apple”) creates a state variable fruit with the initial value “Apple” and a function setFruit to update it. When the button is clicked, the handleFruit function runs and calls setFruit(“Banana”), which changes the state from “Apple” to “Banana”. As soon as the state updates, React automatically re-renders the component, so the updated value is shown on the screen.

Now, we will see the example of counter.

Counter.js: (no update logic)

Output:

Now, writing the update logic.

Counter.js:

Output: initially

Output: when clicked

Now, we are writing the same update the counter logic, but this time as a separate function.

Counter.js:

Output: at start

Output: when button was clicked.

Now, we can even use two states in the same code. We will see that in the counter example as well, where the other one be to count in reverse.

App.js:

Output: at start

Output: when clicked.

This React component uses two state variables: count initialized to 0 and rcount initialized to 10. Clicking the first button increases count by 1, while clicking the second button decreases rcount by 1 using their respective state update functions. Whenever state changes, React automatically re-renders the component and updates the UI with the new values.

Example: using useState to change the status of the text from “On” to “off”.

LightSwitch.js:

Output: at start

Output: when button was clicked.

This React component creates a simple light switch using the useState Hook. The variable isOn stores whether the light is currently ON (true) or OFF (false), and it starts as false, meaning the light is initially OFF. When the button is clicked, the toggleLight function runs and changes the state to the opposite value using !isOn (true becomes false, and false becomes true). The <h1> element displays “On” when isOn is true and “off” when it is false. React automatically re-renders the component whenever the state changes, so the displayed status updates instantly when the button is clicked.

Example: using useState to Show/Hide Text Component.

ShowHideText.js:

Output:

Output: when clicked

It uses useState to store a value called show, which starts as true, meaning the text is visible at the beginning. When the button is clicked, the toggleText function runs and changes show to the opposite value using !show (so true becomes false and false becomes true). The button text also changes dynamically — showing “Hide” when the text is visible and “Show” when it is hidden. Finally, the paragraph is displayed only when show is true using show && <p>…</p>, so clicking the button hides and shows the message instantly without reloading the page.

Example: to capitalise the text entered by the user.

CapitalizeText.js:

Output:

Output: when something was typed and button was clicked.

This code defines a controlled component in React that manages user input and performs a string transformation. By invoking the useState hook, it initializes a state variable (text) and its corresponding setter function (captext). The <input> element is bound to this state via its value attribute, creating a one-way data binding from state to view. To achieve two-way data binding, an onChange event handler captures user input events, extracting the real-time value via e.target.value and updating the state, which triggers a component re-render. When the button is clicked, it executes the cap event handler, which utilizes the JavaScript toUpperCase() prototype method to transform the current state string and commits the mutated, capitalized string back to the state, causing the DOM to update with the final capitalized text.

Example: using useState to change the theme from light to dark and viceversa.

ToggleMode.js:

Output: by default

Output: when button was clicked.

This code builds a webpage that flips between light and dark themes when you click a button. Inside the component, a boolean (true/false) memory switch called mode is created using useState(false). When the button is clicked, it runs the changeMode function, which simply flips that switch to its opposite value. Because the styles of the page and the text on the screen are tied directly to this switch using conditional shortcuts, the entire background color and text instantly swap from light to dark (or dark to light) every time the button is pressed.

Now, keep in mind these things about the component:

App.js: (We can have more than one component in a file, and we can use one component inside another by calling it. The component we export (App) becomes the main component available outside the file.)

Output:

In this code, App is the main component that is exported and rendered. Inside App, an <h1> heading and the Greeting component are displayed. The Greeting component is another component in the same file that returns an <h2> heading. When App renders, it also renders Greeting, so both headings appear on the screen. The empty tags (<> </>) are React Fragments, which let us group multiple elements without adding an extra HTML element.

Also, keep in mind that we can do like this in JSX:

Output:

Also, keep in mind that we can use the functions inside the component.

App.js:

Output:

Now, let’s understand how to handle the checkboxes in react:

App.jsx:

Output:

Output: when clicked on the check boxes

This React component lets users select multiple skills using checkboxes. The skills state stores all selected skills in an array. When a checkbox is checked or unchecked, the handleSkills function runs and gets the checkbox’s value (e.g., “PHP”) and checked status (true or false). If checked, the skill is added to the skills array using the spread operator (…skills); if unchecked, it is removed using filter(). Finally, skills.join(“, “) displays all selected skills as a comma-separated list on the screen.

Now, let’s understand how to handle the radio buttons in react:

App.jsx:

Output:

Output: when clicked on the other radio button.

This React code creates a simple gender selection form using radio buttons. It uses the useState hook to store the selected gender, with “male” set as the default value. When the user clicks either the Male or Female radio button, the onChange event updates the gender state with the selected value. The checked property ensures that the correct radio button remains selected based on the current state. Finally, the selected gender is displayed on the screen in real time below the radio buttons.

Loop in JSX with Map function:

App.jsx: