React Forms Radio Buttons
React Forms – Radio Buttons Radio buttons allow users to pick one option from multiple choices.Unlike checkboxes, only one selection is allowed at a time. In React, radio buttons are controlled using state +...
Category: React Tutorial
React Forms Checkbox
React Forms – Checkbox Checkboxes in React can be used in two main ways: Single checkbox (true/false value) Multiple checkboxes (selecting multiple items) Since React uses controlled components, the checkbox state is managed using...
React Forms Multiple Input Fields
React Forms – Multiple Input Fields When working with forms that have many input fields (like username, email, password, etc.), managing each input with a separate state becomes messy.So, React allows storing multiple inputs...
React Forms Select
React Forms – Select (Dropdown) In plain HTML, the selected value of a <select> element is determined by the selected attribute:
|
1 2 3 4 |
<select> <option value="volvo" selected>Volvo</option> <option value="bmw">BMW</option> </select> |
But in React, the <select> element becomes a controlled component, meaning the...
React Forms Textarea
React Forms – Textarea In regular HTML, the <textarea> element contains its value between the opening and closing tags:
|
1 |
<textarea>Hello world!</textarea> |
But in React, form elements including <textarea> are treated as controlled components, meaning their...
React Submit Forms
React Submit Forms Submitting forms in React involves handling the form’s onSubmit event and controlling the form input values using state. React does not automatically submit forms like HTML — instead, you manually manage...
React Forms
React Forms Forms are a key part of web applications — they allow users to input data.In React, forms work differently from regular HTML because React controls the UI using state. 📌 Controlled Components...
React Lists
⚛️ React Lists In React, you can loop through arrays and display them using the JavaScript method .map(). 🔹 Basic Example: Rendering an Array
|
1 2 3 4 5 6 7 8 9 10 11 |
function App() { const fruits = ["Apple", "Banana", "Cherry"]; return ( <ul> {fruits.map((fruit) => ( <li>{fruit}</li> ))} </ul> ); } |
export default App; ✔ map() loops through the...
React Conditional Rendering
⚛️ React Conditional Rendering In React, you can conditionally render JSX using: ✔ if statements✔ ternary operator✔ logical AND (&&)✔ switch statements✔ conditional return 1. Using if Statement (Outside JSX)
|
1 2 3 4 5 6 7 |
function App() { const isLoggedIn = true;if (isLoggedIn) { return <h2>Welcome User!</h2>; } return <h2>Please Login</h2>; } |
This completely...
React Events
⚛️ React Events React events work similar to DOM events, but there are some key differences: Feature HTML React Event name lowercase camelCase Function string function Example onclick=”doSomething()” onClick={doSomething} Example: Click Event (Functional Component)...