Today in this blog, we will aware about How to add array object elements in
reactjs. So, without wasting any time lets do it but lets recap what is
exactly React js.
React
Certainly, reactjs is a JavaScript library developed by Facenook
for building user interfaces. It allows developers to create reusable UI
components and effciently 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.
Here we first make a file as called ElementAdd.jsx.
import React, { useState } from 'react'; function ElementAdd() { const [myArray, setMyArray] = useState([ { id: 1, name: 'mango' }, { id: 2, name: 'apple' }, { id: 3, name: 'banana' } ]); const [inputValue, setInputValue] = useState(''); const handleInputChange = (event) => { setInputValue(event.target.value); }; const addElement = () => { const newElement = { id: myArray.length + 1, name: inputValue }; setMyArray(prevArray => [...prevArray, newElement]); setInputValue(''); }; return ( <div> {myArray.map(item => ( <div key={item.id}>{item.name}</div> ))} <input type="text" value={inputValue} className='border' onChange={handleInputChange} /> <button onClick={addElement} >Add Element</button> </div> ); } export default ElementAdd;
# In this example, the initial state myArray is an
empty array. The inputValue state variable is used to capture the user input
from an input field.
# The handleInputChange function is
triggered when the user types in the input field. It updates the inputValue
state with the new value entered by the user.
# The
addElement function is triggered when the "Add Element" button is clicked. It
creates a new element using the current inputValue as the name and assigns a
unique id. It then uses the setMyArray function to update the array state by
spreading the previous array elements (prevArray) along with the new
element.
# After adding the element, the setInputValue('')
function is called to reset the input field.
# When
rendering the array, each item's name property is displayed. The input field
captures user input, and the "Add Element" button triggers the addElement
function to add a new object element to the array based on the user's
input.
# In this example, item.id is used as the key for
each rendered element.
Output
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.
0 comments:
Post a Comment
For Any Tech Updates, Hacking News, Internet, Computer, Technology and related to IT Field Articles Follow Our Blog.