Multiplication table of user input in React js
Today in this blog we will aware about Multiplication table means how to generate table of 5, 6, 7, 8 etc in react js but this time we will generate table by user input so dont waste time lets do it but lets recap what is exactly React js.
React
Certainly! ReactJS is a JavaScript library developed by Facebook
for building user interfaces. It allows developers to create reusable UI
components and efficiently manage the state of their applications. Here are
some key aspects of ReactJS:
Component-Based Architecture: ReactJS follows a component-based
architecture, where the user interface is divided into small, reusable
components. Components encapsulate their own logic, state, and rendering,
making it easier to build and maintain complex user interfaces.
Virtual DOM: ReactJS uses a virtual representation of the DOM (Document
Object Model), known as the Virtual DOM. When the state of a component
changes, React updates the Virtual DOM.
JSX: JSX is a syntax extension for JavaScript used in React. It allows
developers to write HTML-like code within JavaScript, making it easier to
describe the structure and appearance of components. JSX code is transpiled to
regular JavaScript using tools like Babel before being executed in the
browser.
Hooks: React introduced Hooks in
version 16.8 as a way to use state and other React features in functional
components. Hooks allow developers to write reusable logic and manage state
within functional components without the need for class components. The most
commonly used hooks are useState for managing state and useEffect for handling
side effects such as fetching data or subscribing to events.
React Router: React Router is a popular routing library for React
applications. It enables developers to create single-page applications with
multiple views and handles routing between different components based on the
URL.
State Management: React provides a flexible ecosystem of state
management solutions. While React's built-in state management (useState ) is
suitable for managing local component state, more complex applications may
benefit from additional state management libraries like Redux. These libraries
help manage global application state and provide predictable ways to update
and access the state.
ReactJS has gained
widespread popularity due to its performance,
reusability, and declarative approach to building user interfaces. It has large
community.
NOTE - Here we will Tailwind CSS for designing..
Generating Table
To create a multiplication table of 5 in ReactJS based on user input, you
can follow these steps:
# Set up a React component with a state to track the user input and the
resulting multiplication table.
# Render an input field where the
user can enter a number.
# Add an event handler to capture the
user input and update the component's state.
# Use the entered
number to generate the multiplication table and store it in the component's
state.
# Render the multiplication table below the input field.
Here's an example implementation:
import React, { useState } from 'react'
function Table() {
const [number, gettbl] = useState('');
const rows = [];
for(let i = 1; i <= 10; i++)
{
rows.push(
<tr key={i}>
<td className='text-red-600 ' >{number} * {i} = {i * number }</td>
</tr>
);
}
for(let i = 1; i <= 10; i++) {
const result = i * number;
console.log(`${number} * ${i} = ${result}`);
}
const getTable = (event) => {
gettbl(event.target.value); // for updating the value
}
return (
<div className="">
<div className="grid justify-center grid-cols-1 lg:grid-cols-2 gap-2 mt-48 h-96 ml-[40%] ">
<div className="w-full max-w-xs mt-auto md:grid-rows-6 ">
<form className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
>
<div className="mb-4">
<label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="number">
Number
</label>
<input className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
type="number"
placeholder="Enter Number For Table"
onChange={getTable }
name="number"
/>
</div>
<div className='mt-3 flex px-auto ' >
<p>{rows}</p>
</div>
</form>
</div>
</div>
</div>
);
}
export default Table
This component maintains the "number" state to store the user input and the
"gettbl" state to store the generated multiplication table. The "getTable"
function is called whenever the user enters a number. It updates the number
state and generates the multiplication table using the "Table" function. The
resulting table is stored in the table state and rendered in the table element
below the input field.
Here rows.push is that Appends new
elements to the end of an array, and returns the new length of the
array.
Remember to include this component in your main
application and render it where desired.
Read More - How to add loader or spinner in react js?
Disclaimer
All tutorials are for informational and educational purposes only and have been made using our own routers, servers, websites and other vulnerable free resources. we do not contain any illegal activity. We believe that ethical hacking, information security and cyber security should be familiar subjects to anyone using digital information and computers. Hacking Truth is against misuse of the information and we strongly suggest against it. Please regard the word hacking as ethical hacking or penetration testing every time this word is used. We do not promote, encourage, support or excite any illegal activity or hacking.
